Question

I got a function which displays content based on menu options, each time a user clicks a different option the current active content will fade out and clicked content will display (each div from determined option will display in sequence), my problem is how I could prevent user fast clicking, for example if he decides to click in a different section before the last one ends it will mess up things with the animations the, here is my code.

$(document).ready(function() {
    $("#Default .box").fadeIn(); 
    var $aBox = 0;
    var $menu = "#inner_menu li";
    var $myliID = 0;
    var $myBox = "#Digital_Box .box";
    var $myActiveBox = 0;
    var $myHeight = 0;

    $($menu).click(function() {
        var delay = 0;
        $myliID = $(this).attr("id");
        $myBox = "#" + $myliID + "_Box .box";
          if ($aBox == 1) {
             if ($myActiveBox != $myBox) {
                $($myActiveBox).fadeOut(300);
             }
        $($myBox).delay(300).each(function() 
            {
                $(this).delay(delay).fadeIn(300);
                delay += 500;
              });
            $aBox = 1;
            $myActiveBox = $myBox;
        }
        else
         {
            $("#Default_Box .box").fadeOut(300); 
            $($myBox).delay(300).each(function() 
                {
                    $(this).delay(delay).fadeIn(300);
                    delay += 500;
                });
            $aBox = 1;
            $myActiveBox = $myBox;
        }
        });
});

As you can see I match the li element and it’s determined content through their ID, everything works fine but the problem is fast clicking and not letting the other animation finish.

And sorry if my coding sucks, I’m trying to start writing my own “plugins” 😛

Answer 1

To show you what Kolink said –

In $(document).ready(function()

   var isTransitioning = false;

In $($menu).click(function() {
wrap everything in an IF

   if (isTransitioning == true) {
         // do nothing
   } else {
         // your code
   }

then add this at start of your code

   isTransitioning = true;
   setTimeout(function() {
     isTransitioning = false;
   }, 2000);

which sets a time limit of 2 second between being able to click items