0

border-radius一連のオブジェクトをアニメートできるはずですが、それを理解するのに非常に苦労しています。具体的には、円形の div のサイズを 2 倍にしようとしていますが、それぞれの直径が異なります。私はこのスレッドの提案を無駄にしようとしました（違いは、現在の値を掛けたいということです）。ここで私のjsfiddleを試してみてください。または、以下の私のコードを見てください。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');
    });
});
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 に答える