Question

I have a series of boxes ( tags) that toggle on an off with the following code:

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
  isShowing = false;
  whichIsShowing = new Array();
$(function() {

  $(".normal").hover(
    function() {
      $(this).toggleClass("highlight");
    },
    function() {
    $(this).toggleClass("highlight");
  }
  );
  $("div").toggle(
    function() {
      if (isShowing == false) {
        $(this).animate({width: "500px", height: "500px"}, 1000);
        isShowing = true;
        whichIsShowing.push($(this).attr('id'));
        $("#display").replaceWith("<div id='display' class='title'>Which div is showing? " + whichIsShowing[0] + "</div>");
      } else {
        $("#" + whichIsShowing.pop()).animate({width: "175px", height: "175px"}, 1000);
        $(this).animate({width: "500px", height: "500px"}, 1000);
        whichIsShowing.push($(this).attr('id'));
     $("#display").replaceWith("<div id='display' class='title'>Which div is showing? " + whichIsShowing[0] + "</div>");
      }
     },
     function() {
      if (isShowing == true) {
        $("#" + whichIsShowing.pop()).animate({width: "175px", height: "175px"}, 1000);
      isShowing = false;
      $("#display").replaceWith("<div id='display' class='title'>Which div is showing? " + "none" + "</div>");
      }



    }
 );
});
</script>
<style type="text/css">
.normal {
  width: 175px;
  height: 175px;
  border:2px solid #333333;
  background: Silver;
  float: left;
  margin-right: 20px;
  cursor: pointer;
}
.title {
  clear: both;
}
.highlight {
  background: #FFCC00;
}
</style>

Which div is showing:

The problem seems to be if I click on the boxes too quickly…then I have more than one box “animated out” at the same time, which is not what I want (I only want one box to ever be in the “animated out” state at any time).

Is there any way to prevent an animation from occuring while one box is in the middle of their animation? OR to stop the current animation, reverse it, and animate in the NEW box?

Answer 1

I actually create a ‘state’ variable to ensure only 1 action can fire at any time.

What I do is

• set state = 0; when I initialise the page
• check if state == 0 when something is clicked
• if it’s 0, then I set it to 1 (meaning something’s happening)
• run the animation
• once the animation is complete, I reset the state to 0

Effectively, you can only fire the animation event is state == 0 and then there’s no overlapping.