jQuery - Disable Click until all chained animations are complete

Question

Question

The solution below is intended to slide down the groupDiv displaying div1 and enough space for div2 to slide in. It's all achieved by chaining the animations on the #Link.Click() element.

It seems to bug out, though, when the link is clicked rapidly. Is there a way to prevent this? By perhaps disabling the Click function until the chained animations are complete? I currently have checks in place, but they don't seem to be doing the job :(

Here's the code i'm using:

Custom animate functions.

---

//Slide up or down and fade in or out
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
    if (this.is(":hidden")) {
        visibilityCheck("show", counter--);
        return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
    } else {
        visibilityCheck("hide", counter++);
        return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
    }
};

//Slide off page, or into overflow so it appears hidden.
jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
    if (this.css('marginLeft') == "-595px") {
        return this.animate({marginLeft: "0"}, speed, easing, callback);
    } else {
        return this.animate({marginLeft: "-595px"}, speed, easing, callback);
    }
};

---

In the dom ready, i have this:

---

$('#Link').toggle(
    function() {
        if (!$("#div2 .tab").is(':animated')) {
            $("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
        }
    },
    function(){
        if (!$("#groupDiv").is(':animated')) {
            $('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
        }
    }
);

---

HTML structure is this:

---

<div id="groupDiv">
     <div id="div1">
          <div class="tab"></div>
     </div>
     <div id="div2">
          <div class="tab"></div>
     </div>
</div>

Answer 1

The issue is your first animating the div#GroupDiv so your initial check if (!$("#div2 .tab").is(':animated')) will be false until the groupDiv has finished animated and the callback is fired.

You could maybe try

if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated')) 

however I doubt this will cover really quick clicking. The safest is to unbind the event using

$(this).unbind('toggle').unbind('click');

as the first line inside the if and you can then do away with the animated check. The downside to this is you will have to rebind using the callback you are passing through to your custom animation functions.

Answer 2

You can easily disable your links while animation is running

$('a').click(function () {
    if ($(':animated').length) {
        return false;
    }
});

You can of course replace the $('a') selector to match only some of the links.