代码之家 › 专栏 › 技术社区 › redconservatory

jQuery多重切换动画,当一个动画打断另一个动画时出现错误?

animation events jquery

redconservatory · 技术社区 · 15 年前

我有一系列的框(标记),可以用以下代码打开或关闭:

<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显示:

问题似乎是,如果我点击框太快…那么我有多个框“动画输出”在同一时间,这不是我想要的(我只希望一个框在任何时候都处于“动画输出”状态)。

是否有任何方法可以防止动画在一个框处于动画中间时发生?或者停止当前动画,将其反转,并在新框中设置动画?

2 回复 | 直到 15 年前

niggles 15 年前

我实际上创建了一个“state”变量,以确保在任何时候都只能触发一个操作。

我做的是

设置state=0;当我初始化页面时
单击某个内容时检查state==0
如果是0,那么我将其设置为1(意味着发生了一些事情)
运行动画
动画完成后,我将状态重置为0

实际上,您只能触发动画事件state==0,然后就没有重叠。

Johnny Oshika 15 年前

有两种jQuery技术可以帮助您。

1)可以通过对jQuery包装集调用stop()来停止任何元素上的动画。例如:

$('div').stop();

这将停止正在设置动画的div上的动画。

2)可以使用:动画选择器获取正在设置动画的项的计数。例如:

$('div:animated')。长度;

将返回正在设置动画的所有div元素的计数。如果你想检查所有的动画(不仅仅是div),我相信你可以做这个$(':animated'),但我没有测试它。使用此技术,可以选择不设置任何已设置动画的新元素的动画。