jQuery用于动画化边框半径 [英] jQuery for animating border radius

问题描述

我有一个问题，动画 border-top-left-radius 样式。我使用这种风格通过分别输入两个长度值。

I have a problem animating border-top-left-radius style. I use this style by entering two length values separately.

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

我想分别增加这两个长度值。 jquery.animate ）。

I would like to increase these two length values separately via jquery.animate().

是否有办法实现？

推荐答案

border-top-left-radius只接受一个值？所以你会像下面这样动画：

border-top-left-radius accepts just one value right? So you would animate it like:

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

EDIT

不知道jQuery是否支持这个开箱即用。也许你可以像这样实现步骤回调：

Not sure if jQuery supporst this out of the box. Maybe you can implement the step callback like this:

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

这篇关于jQuery用于动画化边框半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！