如何根據發生的jquery阻止多個動畫的排隊

所以，我有這個網頁，我使用這個名爲transit的庫來動畫3d旋轉和其他css轉換。我有三個鏈接，當鼠標懸停在它們上面時，它們應該放大1.2倍。它的工作原理，一切都很好，很棒，直到我快速地將鼠標移動到圖標上幾次。而不是隻出現一次的動畫，它會連續出現幾次（或者我將鼠標放在它上面多少次）。我如何做到這一點：不管鼠標在div上運行多少次，它只會動畫一次（如長時間懸停）？如何根據發生的jquery阻止多個動畫的排隊

我清楚了嗎？

這裏的網站鏈接： LINK

這裏是jQuery代碼：

//FYI, the div id is "rotater"  
$(function(){ // $(document).ready shorthand 
       $('#background').hide(); 
       $("#banner").hide(); 
       $("#rotater").hide(); 
       $(".tab").hide(); 
       $(".content").hide(); 
       $("#share").hide(); 
       $(".sidenav").hide(); 
       $("#navigation").animate({top:"100%"}); 
       window.setTimeout(function(){$('#banner').fadeIn('slow');$("#navigation").animate({top:"0"}); 
              $('#background').fadeIn('slow'); 
              $("#rotater").fadeIn("fast").transition({rotateY:360, duration:3000}); 
              $("#share").fadeIn("slow");$(".sidenav").fadeIn("slow"); 
              $("#ha").animate({top:"25%",left:"3%"});$("#do").animate({top:"45%",left:"3%"}); 
              $("#set").animate({top:"65%",left:"3%"});$("#net").animate({top:"25%",left:"75%"}); 
              $("#dasu").animate({top:"65%",left:"75%"});}, 1000); 
       $(".sidenav").hover(function(){$("#"+this.id).transition({scale:1.2});}, function(){$("#"+this.id).transition({scale:1});}); // THIS IS THE CODE IN QUESTION 
       $("#share").hover(function(){$("#share").animate({left:"0%"});}, function(){$("#share").animate({left:"-15%"});}); 
       var cw = $('#rotater').width(); 
       $('#rotater').css({'height':cw+'px'}); 
       setInterval(function(){$("#rotater").transition({rotateY:'+=360deg', duration:3000});},10000); 

      }); 
      $(window).load(function() { 
       $(".loader").fadeOut("slow"); 
      })

來源

2014-05-01 Theodore_Kim

什麼是'.transition'？也不要這樣做'$（「＃」+ this.id）'只是做這個'$（this）' – Fresheyeball

.transition是我正在使用的自定義動畫庫。和animate（）一樣工作。感謝您的提示。 –

它與「animate（）」有什麼相同之處？ 'animate（）'將條目添加到一個fx隊列中，該隊列可以使用'.stop（）'或'.finish（）'方法按需停止。這同樣適用於'.transition'嗎？ –

如果你不想多jQuery的動畫順序運行，那麼你將要開始的每個之前調用$(yourObj).stop()動畫。您可以使用參數.stop(a, b)來控制究竟發生了什麼 - 動畫是剛剛停止在哪裏，並且新動畫從那裏開始，還是在下一個動畫開始之前跳到結束狀態，等等......

查看jQuery doc for .stop()瞭解更多詳情。通常情況下，你要的是這樣的：

$(yourObj).stop(true, true);

以前的動畫跳轉到它的最終狀態，並從隊列中清除，從而，如果第一個已經完成了下一個可以立即啓動。您可能會希望在每個jQuery動畫之前調用它，在第一個動畫完成之前可能再次調用它。

例如，你可以改變這一點：

$("#share").hover(function(){ 
    $("#share").animate({left:"0%"}); 
}, function(){ 
    $("#share").animate({left:"-15%"}); 
});

這樣：

$("#share").hover(function(){ 
    $("#share").stop(true, true).animate({left:"0%"}); 
}, function(){ 
    $("#share").stop(true, true).animate({left:"-15%"}); 
});

在某些情況下，你不希望第二個參數被設置爲true（所以你可能只需要.stop(true)而不是.stop(true, true)。您可能希望當前動畫停止在原來的位置，並讓新動畫從中取出它 - 這取決於具體操作以及您希望如何操作。

來源

2014-05-01 22:26:11 jfriend00

謝謝soooooooo多!!你是個奇蹟！ –

如何根據發生的jquery阻止多個動畫的排隊

回答

相關問題