CODEWITHSUNDEEP
jqueryhtmlevent-handlingclickonclicklistener
user2537470
user2537470

Reputation: 23

How do I disable the JQuery click handler temporarily while an animation is running?

I'm still relatively new to JQuery, and I'm confused about how to solve the following issue. I want to temporarily disable the two flip functions (that respond to click events) until after the fade animation finishes.

With what I have below, the functions still run while the animations are going, so both divs (card-back and card-content) show at the same time.

$(document).ready(function(){

  $("#card-back").hide();
  $(".flip-back").hide();

  function firstflip(){
    $(".flip-back").show();
    $(".flip").hide();
    $("#card-content").fadeToggle("fast");
    $("#card-back").delay(300).fadeToggle("fast");
  }

  function secondflip(){
    $(".flip-back").hide();
    $(".flip").show();
    $("#card-back").fadeToggle("fast");
    $("#card-content").delay(300).fadeToggle("fast");
  }

  $(".flip").click(function(){
    $(".flip-back").unbind("click");
    firstflip();
    setTimeout(function(){
      $(".flip-back").bind("click",secondflip);
    },2000);
  });

  $(".flip-back").click(function(){
    $(".flip").unbind("click");
    secondflip();
    setTimeout(function(){
      $(".flip").bind("click",firstflip);
    },2000);
  });

});

Appreciate any help I can get on this matter!

EDIT: Just for clarity, I'm okay now on the fade in-fade out separation, but I need help on how to delay the re-bind of the click to the flip function (to avoid the queue of animations stacking up with multiple clicks in a row).

Upvotes: 2

Views: 1417

Answers (2)

IMSoP
IMSoP

Reputation: 97718

Rather than an arbitrary delay before binding the new event handler (using setTimeout) you can pass a callback to the fadeToggle function which is executed once the animation is completed. This can be used both to show the new click target (which I assume is a button of some sort) and bind an event to it.

Meanwhile, rather than using anonymous functions for your event handlers which then call the named firstFlip and secondFlip, just put all your logic in the named functions and pass those as the event handlers. (You seem to be doing this when re-binding, but not when doing it the first time.)

See comments in the edited code below for what has changed:

$(document).ready(function(){

  $("#card-back").hide();
  $(".flip-back").hide();

  function firstflip(){
    // Hide button and remove this click event until next flip completes
    $(".flip").unbind('click').hide();
    $("#card-content").fadeToggle("fast");
    $("#card-back").delay(300).fadeToggle("fast", function(){
       // Once fully displayed, show button and bind next click handler
       $(".flip-back").show().bind("click",secondflip);
    });
  }

  function secondflip(){
    // Hide button and remove this click event until next flip completes
    $(".flip-back").unbind('click').hide();
    $("#card-back").fadeToggle("fast");
    $("#card-content").delay(300).fadeToggle("fast", function(){
       // Once fully displayed, show button and bind next click handler
       $(".flip").show().bind("click",firstflip);
    });
  }

  // Bind initial event (no need to bind secondflip yet, as firstflip will remove it anyway)
  $(".flip").bind("click",firstflip);

});

Upvotes: 0

Chris Wijaya
Chris Wijaya

Reputation: 1286

Try Callback, a feature that will make a function wait for another function to finish before performing.

Code is something like this:

function firstflip(){
    $(".flip-back").show();
    $(".flip").hide();
    $("#card-content").fadeToggle("fast",function(){
         $("#card-back").delay(300).fadeToggle("fast");
    });

}

Upvotes: 1

Related Questions