Question

必须有可能为一组物体的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');
    });
});

Answer 1

在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

Answer 2

试试这个...... 使用宽度和高度为border-radius设置动画。

$('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/

通过乘以其当前值来为border-radius设置动画

2 个答案: