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多重切換動畫，當一個動畫中斷另一個動畫時出錯？

回答

相關問題