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"})}

Could you be a bit more detailed, I'm fairly new to web development and my js is cloudy. — vulpcod3z, Dec 06 '13 at 15:07
Something is wrong with your code. You dropped the ending `)`. And you should never put a `div` inside an `a` tag. — Frank Fang, Dec 06 '13 at 15:14
http://stackoverflow.com/questions/3092610/div-inside-link-a-href-tag — Frank Fang, Dec 06 '13 at 15:15
Thank you all for your help, again, fairly new to this all and I appreciate all feedback! — vulpcod3z, Dec 07 '13 at 01:46

Terry · Accepted Answer · 2013-12-06T15:17:16.357

0

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"
        });
    }

edited Dec 06 '13 at 15:17

answered Dec 06 '13 at 15:01

Terry

63,248
15
96
118

Plugged this in and now it jitters. Maybe my code is too abstract? – vulpcod3z Dec 06 '13 at 15:08
Can you demonstrate it in your fiddle? All I see is a blank HTML output. – Terry Dec 06 '13 at 15:18
I will tonight, I realized everything but my html has disappeared from my fiddle.. – vulpcod3z Dec 07 '13 at 02:02
This worked well! Not sure what happened originally but thanks nonetheless. – vulpcod3z Dec 07 '13 at 22:10
@RickyS I'm glad it worked ;) if the solution is sound, please accept it. Thank you. – Terry Dec 07 '13 at 22:24

emerson.marini · Answer 2 · 2013-12-06T15:07:46.157

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/

This works but not for what I need it to do. Thanks though for reminding me of the callback option. — vulpcod3z, Dec 07 '13 at 22:09

score 0 · Answer 3 · answered Dec 06 '13 at 15:11

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/

HTML Javascript events queued?

3 Answers3