jQuery анимация множественного переключения, ошибка, когда одна анимация прерывает другую?

Question

У меня есть ряд ящиков (тегов), которые включают / выключают со следующим кодом:

<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>

Какой div показывает:

Проблемакажется, если я нажимаю на ячейки слишком быстро ... тогда у меня одновременно «оживляется» несколько ящиков, а это не то, чего я хочу (я хочу, чтобы в ячейке «оживляло» только одна ячейка"состояние в любое время).

Есть ли способ предотвратить возникновение анимации, когда один блок находится в середине их анимации?ИЛИ, чтобы остановить текущую анимацию, перевернуть ее и анимировать в окне NEW?

Answer 1

Существует несколько методов jQuery, которые могут вам помочь.

1) Вы можете остановить анимацию на любом элементе, вызвав stop () для упакованного набора jQuery.Например:

$ ('div'). Stop ();

Это остановит анимацию на оживляемых div-элементах.

2) Вы можете получить счетэлементов, которые анимируются с помощью селектора: animated.Например:

$ ('div: animated'). Length;

вернет счетчик всех элементов div, которые анимируются.Если вы хотите проверить все, что анимируется (не только div), я думаю, вы можете сделать это $ (': animated'), но я не проверял это.Используя эту технику, вы можете не анимировать какие-либо новые элементы, если они уже анимированы.

Answer 2

Я фактически создаю переменную 'state', чтобы гарантировать, что в любой момент может сработать только 1 действие.

Что я делаю, это

• установленное состояние = 0; когда я инициализирую страницу
• проверить, если состояние == 0, когда что-то нажимается
• если это 0, то я установил его на 1 (что означает, что что-то происходит)
• запустить анимацию
• после завершения анимации я сбрасываю состояние до 0

По сути, вы можете запустить событие анимации только в состоянии == 0, и тогда нет перекрытия.