通过乘以其当前值来动画边界半径

必须可以对一组对象的border-radius进行动画制作，但我有一段时间计算出来。具体而言，我试图将圆形div的大小加倍，每个都有不同的直径。我试过this thread的建议无济于事（不同之处在于我想乘以当前值）。把你最好的刺戳在我的jsfiddle here。或者看看我的代码如下。 width和height工作正常，但border-radius没有。通过乘以其当前值来动画边界半径

$('a').click(function() { 
    $('.box').each(function() { 
     var element = $(this); 
     element.animate({ 
      'width' : element.width()*2, 
      'height' : element.height()*2, 
      'border-top-left-radius' : element.css('border-top-left-radius')*2, 
      'border-top-right-radius' : element.css('border-top-right-radius')*2, 
      'border-bottom-left-radius' : element.css('border-bottom-left-radius')*2, 
      'border-bottom-right-radius' : element.css('border-bottom-right-radius')*2, 
     }, 'slow'); 
    }); 
});

来源

2013-10-09 wetjosh

使用border-radius: 50%;在css

对于EGS：

#one { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%;/* Use 50% here to make circle */ 
    background: cornflowerblue; 
    float: left; 
    clear: left; 
}

同样为#two和#three

Fiddle

来源

2013-10-09 07:05:32

非常感谢Rohan。这可以让我动画的宽度和高度，甚至不用担心边界半径。完美的答案 – wetjosh

试试这个...... 使用宽度和高度动画边框半径。

$('a').click(function() { 
    $('.box').each(function() { 
     var element = $(this); 
     element.animate({ 
      'width' : element.width()*2, 
      borderRadius : element.width(), 
      'height' : element.height()*2 
     }, 'slow'); 
    }); 
});

更新jsfiddle链接在这里。：http://jsfiddle.net/RgJsU/14/

来源

2013-10-09 07:03:13 varun

虽然我认为罗汉的方法更好，但这是一个值得的想法。你的jsfiddle链接也被打破了。尽管如此，非常感谢你的回答。看起来它会起作用，因为它将是宽度值的一半。 – wetjosh

对不起。我没有注意到。现在我已经更新了小提琴链接。并感谢您的评论。 – varun

通过乘以其当前值来动画边界半径

回答

相关问题