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

问题似乎是如果我太快点击盒子......那么我同时有多个盒子“动画出来”，这不是我想要的（我只想要一个盒子）在任何时候“动画出”状态。）

有一种方法可以阻止动画在一个框位于动画中间时出现吗？或者在新框中停止当前动画，反转动画和动画？

Answer 1

我实际创建了一个'state'变量，以确保任何时候只能触发1个动作。

我的工作是

set state = 0;当我初始化页面时
检查点击某些内容时状态== 0
如果它是0，那么我将它设置为1（意味着正在发生的事情）
运行动画
动画完成后，我将状态重置为0

实际上，你只能触发动画事件状态== 0然后没有重叠。

Answer 2

有一些jQuery技术可以帮助你。

1）您可以通过在jQuery包装集上调用stop（）来停止任何元素上的动画。例如：

$（ 'DIV'）停止（）;

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

2）您可以使用：动画选择器获取动画项目数。例如：

$（ 'DIV：动画'）。长度;

将返回所有正在设置动画的div元素的计数。如果你想检查所有被动画的东西（不仅仅是div），我相信你可以做这个$（'：动画'），但我还没有测试过。使用此技术，您可以选择不为任何新元素设置动画（如果已经设置了动画。

）

jQuery多个切换动画，一个动画中断另一个动画时的错误？

2 个答案: