Question

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!

Answer 1

Set stop(true, true).

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

Demo