Jquery animation finishing and waiting

Question

I want to make the animations to not go all together when someone just hovers all the elements at the time but to somehow make them wait. Please help me thanks for any kind of it. My code:

$(document).ready(function(){
$('.collapse1').hover(function(){
    $('.collapse2').stop(false,true);
    $('.collapsetext1').animate({
        width: 'toggle'
    }, 444)
});
$('.collapse2').hover(function(){
    $('.collapsetext2').animate({
        width: 'toggle'
    }, 444)
});
$('.collapse3').hover(function(){
    $('.collapsetext3').animate({
        width: 'toggle'
    }, 444)
});});

Answer 1

You could set it up so that when button1 fires off its animation it sets a status var to true so other animations could see if it is running. You could then have button1 fire a custom event when it completes as well as reseting the status var to false. Before button 2 or 3 fire they check the status of button1. If the status shows true, they bind their own animation to the custom event trigger. If button1 status is false, they just fire immediately.

Does that cover your use case?

Here is an example using Ben Alman's really tiny pub/sub :

 /* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011 * http://benalman.com/ * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */ (function($) { var o = $({}); $.subscribe = function() { o.on.apply(o, arguments); }; $.unsubscribe = function() { o.off.apply(o, arguments); }; $.publish = function() { o.trigger.apply(o, arguments); }; }(jQuery)); $(document).ready(function(){ var btn1run = false; var btnevent = new CustomEvent("btn1Complete", {}); $('.collapse1').hover(function(){ console.log("hover1"); btn1run = true; $('.collapsetext1').animate({ width: 'toggle' }, 1000, function() { btn1run = false; // trigger event $.publish("btn1Complete") } ); }); $('.collapse2').hover(function(){ console.log("hover2"); if (btn1run) { $.subscribe("btn1Complete", AnimateBtn2 ); } else { console.log("run"); AnimateBtn2(); } }); $('.collapse3').hover(function(){ if (btn1run) { $.subscribe("btn1Complete", AnimateBtn3 ); } else { AnimateBtn3(); } }); function AnimateBtn2() { $('.collapsetext2').animate({ width: 'toggle' }, 444, function() {$.unsubscribe("btn1Complete", AnimateBtn2);}); } function AnimateBtn3() { console.log("3"); $('.collapsetext3').animate({ width: 'toggle' }, 444, function() {$.unsubscribe("btn1Complete", AnimateBtn3);}); } }); 

 div { background-color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse1"> <p class="collapsetext1">button 1</p> </div> <div class="collapse2"> <p class="collapsetext2">button 2</p> </div> <div class="collapse3"> <p class="collapsetext3">button 3</p> </div>