用于动画边框半径的jQuery答案

【问题标题】：jQuery for animating border radius用于动画边框半径的jQuery
【发布时间】：2012-11-13 03:54:39
【问题描述】：

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

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

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

有没有办法做到这一点？

【问题讨论】：

你试过这些作为字符串吗？
分开是什么意思？一个接一个，或者好像它们完全独立地被两个不相互交流的东西控制着？
是的，我试过了，但没有运气。
问题是，我不知道如何分别访问这两个属性。当您设置borderTopLeftRadius 时，它会将它们都设置为一个特定值。我需要类似borderTopLeftRadiusUpperLength和borderTopLeftRadiusSideLength..
同时。我可以使用 html5 过渡，但我有 32 个不同的 div 值，我不想定义 32 个不同的类..

标签： jquery css jquery-animate

【解决方案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/

【讨论】：

不，它接受两个，它可以使用椭圆体的弧而不仅仅是一个完美的圆
这也是我的建议。他已经开始了。我想看看结果。
谢谢两位。似乎没有其他办法，只能在 step 函数中实现这一点。我通过将持续时间除以 jQuery.fx.interval 来计算步数，并相应地增加样式值。