HTML Javascript events queued?

Question

What I am trying to accomplish is to have divs on my website that, when hovered on, causes the rest of the divs to shrink. It produces good results but there is an issue where if a mouse is placed on a div and taken off quickly (switching between divs) it re-sizes the divs to their starting dimensions BEFORE adjusting which divs should be shrunk. Any and all help is appreciated. JSFiddle http://jsfiddle.net/vulpCod3z/aYY4E/

$('#home').hover(
    function(){
        $('#locations').animate(
            {height: "400px", width: "136px"});
        $('#catering').animate(
            {height: "400px", width: "136px"});
        $('#mealPlans').animate(
            {height: "400px", width: "136px"});
        $('#jobs').animate(
            {height: "400px", width: "136px"});
        $('#aboutUs').animate(
            {height: "400px", width: "136px"})},
    function(){
            $('#locations').animate(
                {height: "448px", width: "150px"});
            $('#catering').animate(
                {height: "448px", width: "150px"});
            $('#mealPlans').animate(
                {height: "448px", width: "150px"});
            $('#jobs').animate(
                {height: "448px", width: "150px"});
            $('#aboutUs').animate(
                {height: "448px", width: "150px"})}

Answer 1

The dangers with using .animate() as-is is that you do not ensure that the element has returned to it's original or end state, causing an animation queue to stack up upon each other. Therefore, chaining .stop(true,true) usually alleviates the issue, i.e. .stop(true,true).animate(...).

Moreover, your function seems to be bloated — if all elements are to be adjusted to the same dimensions, you can use multiple selectors, or even better, simply selecting the siblings of #home.

$('#home').hover(
    function(){
        $(this).siblings().stop(true,true).animate({
            height: "400px",
            width: "136px"
        });
    },
    function(){
        $(this).siblings().stop(true,true).animate({
            height: "448px",
            width: "150px"
        });
    }

Answer 2

You can use the callback function provided by the .animate() method, and nest the calls:

$('#home').hover(
    function() {
        $('#locations').animate({height: "400px", width: "136px"}, function() {
            $('#catering').animate({height: "400px", width: "136px"}, function() {
                $('#mealPlans').animate({height: "400px", width: "136px"}, function() {
                    $('#jobs').animate({height: "400px", width: "136px"}, function() {
                        $('#aboutUs').animate({height: "400px", width: "136px"});
                    });       
                });
            });
        });
    },
    function() {
        $('#locations').animate({height: "448px", width: "150px"}, function() {
            $('#catering').animate({height: "448px", width: "150px"}, function() {
                $('#mealPlans').animate({height: "448px", width: "150px"}, function() {
                    $('#jobs').animate({height: "448px", width: "150px"}, function () {
                        $('#aboutUs').animate({height: "448px", width: "150px"});
                    });
                });
            });
        });
     });

This way, the next method will be called just after the completion of the previous one.

Source: http://api.jquery.com/animate/

Answer 3

To put it simply, just replace .animate() with .stop().animate()

Here is a demo http://jsfiddle.net/aYY4E/1/

Every time you call .animate(), an animate command will be pushed into a queue which will be executed one by one.

To clear the queue, you can call .stop() or .clearQueue.

More detail http://api.jquery.com/stop/