用于动画边框半径的 jQuery

Question

我在为 border-top-left-radius 样式设置动画时遇到问题。我通过分别输入两个长度值来使用这种样式。

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

我想通过 jquery.animate() 分别增加这两个长度值。

有什么办法可以实现吗？

Answer 1

border-top-left-radius 只接受一个值对吗？所以你会像这样制作动画:

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