jQuery多重切换动画，当一个动画中断另一个动画时出错？

我有一系列关于关闭切换用下面的代码盒（标签）：jQuery多重切换动画，当一个动画中断另一个动画时出错？

<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框中设置动画效果？

来源

2010-11-29 redconservatory

我实际上创建了一个'状态'变量来确保只有一个动作可以在任何时候触发。

我做的是

设置状态= 0;当我初始化页面
检查，如果状态== 0时的东西被点击
，如果是0，那么我将它设置为1（意思是有什么地方发生）
运行动画
一旦动画完成，我将状态重置为0

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

来源

2010-11-29 05:10:10 niggles

有几个jQuery技术可以帮助你。

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

$（'div'）。stop（）;

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

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

$（'div：animated'）。length;

将返回所有正在动画的div元素的计数。如果你想检查一切正在动画（不只是div），我相信你可以做这个$（'：animated'），但我没有测试过它。使用这种技术，你可以选择不动画任何新的元素，如果一个已经被动画。

来源

2010-11-29 05:22:00

jQuery多重切换动画，当一个动画中断另一个动画时出错？

回答

相关问题