CODEWITHSUNDEEP
jqueryresizejquery-animate
ambiguousmouse
ambiguousmouse

Reputation: 2063

Prevent multiple jQuery animations from happening at the same time

This question may seem similar to other questions about preventing animations queuing, but this question is different.

I created a simplified example on jsFiddle for illustration purposes. (In this example, #box could just be set to width:50%, but the real application I am working on is more complicated and requires complex calculations on the box elements).

I have a container with a box inside. When the container is resized, the box should be animated and resized to a certain size.

However, if you resize the result box slowly (over a period of 1 second), the #box resizes in a jerky way.

http://jsfiddle.net/B7UGm/

$('#container').resize(function() {
    $("#box").animate({'width':$('#container').width() * 0.5});
});

Optimally, I would like to merge the animations into one so that it changes size in a nice smooth way.

Thanks!

Upvotes: 3

Views: 765

Answers (3)

HasanAboShally
HasanAboShally

Reputation: 18675

u can also use .delay() for example:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

Set stop(true, true).

$('#container').resize(function() {
    $("#box").stop(true, true).animate({'width':$('#container').width() * 0.5});
});

Demo

Upvotes: 4

HasanAboShally
HasanAboShally

Reputation: 18675

you may use css3 transitions, for example:

#box
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}

let me know if this works :)

Upvotes: 4

Related Questions