4

border-top-left-radiusスタイルのアニメーションに問題があります。このスタイルを使用するには、2つの長さの値を別々に入力します。

border-top-left-radius: 15px 25px;

これらの2つの長さの値を、を介して別々に増やしたいと思いますjquery.animate()。

これを達成する方法はありますか？

4

1 に答える 1

3

border-top-left-radiusは1つの値だけを受け入れますか？したがって、次のようにアニメーション化します。

$('.class').animate({borderTopLeftRadius: 20})

編集

jQueryがこれをすぐにサポートするかどうかはわかりません。たぶん、次のようにステップコールバックを実装できます。

$('#container').animate({
    borderTopLeftRadiusSideLength: 500,
    borderTopLeftRadiusUpperLength: 50
}, {
    duration: 5000,
    step: function (val, context) {
        $(this).data(context.prop, val);
        var side = $(this).data('borderTopLeftRadiusSideLength');
        var upper = $(this).data('borderTopLeftRadiusUpperLength');
        if (side && upper) {
            $(this).css('borderTopLeftRadius', side + 'px ' + upper + 'px');
        }
    }
});

http://jsfiddle.net/YWsQn/1/

于 2012-11-25T14:23:51.750 に答える