0

必须可以border-radius为一组对象设置动画，但我花了很长时间才弄清楚。具体来说，我试图将圆形 div 的大小加倍，每个 div 都有不同的直径。我试过这个线程的建议无济于事（不同的是我想乘以当前值）。在这里对我的jsfiddle进行最好的尝试。或者看看我下面的代码。和工作正常，但width没有。heightborder-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');
    });
});
4

2 回答 2

1

用于border-radius: 50%;_css

例如：

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

#two和#three也是如此

小提琴

于 2013-10-09T07:05:32.333 回答
0

试试这个... 用宽度和高度为边界半径设置动画。

$('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-09T07:03:13.110 回答