CODEWITHSUNDEEP
jquerycssjquery-animate
Kemal Taskin
Kemal Taskin

Reputation: 545

jQuery for animating border 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;

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

Is there a way to achieve this?

Upvotes: 4

Views: 3528

Answers (1)

sroes
sroes

Reputation: 15053

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

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

EDIT

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/

Upvotes: 3

Related Questions