如何在前一個動作仍在發生時阻止JQuery動作

我在懸停時滑動的頁面上有一個div，然後在懸停時退出。如果您隨後懸停在物品上，則所有動作都會排隊並觸發，導致物品不斷滑動，即使您不再與其交互。如何在前一個動作仍在發生時阻止JQuery動作

您可以在我正在開發的網站上看到此操作here。只需將鼠標懸停在中心的大圖像上即可查看要顯示的信息div。

理想情況下，應該發生的是，當動畫發生時，不應再排隊。

這裏是我當前的代碼：

$(document).ready(function(){ 
    $(".view-front-page-hero").hover(
     function() { 
      $hero_hover = true; 
      $('.view-front-page-hero .views-field-title').slideDown('slow', function() { 
       // Animation complete. 
      }); 
     }, 
     function() { 
      $hero_hover = false; 
      $('.view-front-page-hero .views-field-title').slideUp('slow', function() { 
       // Animation complete. 
      }); 
     } 
    ); 
});

提前感謝！

來源

2011-01-13 Shadi Almosri

創建一個全局變量。動畫開始時。完成時清除它。如果在調用動畫之前設置此變量，則設置一個條件以退出函數。

來源

2011-01-13 19:09:09

難道也可以將數據附加到用`$的元素。數據（）`？ – Marnix 2011-01-13 23:10:59

這可能不是最好的解決方案，但是如果在動畫之前運行stop(true, true)，它應該可以工作。

現場演示：http://jsfiddle.net/TetVm/

來源

2011-01-13 19:18:47

$(document).ready(function(){ 
var continue=true; 
    $(".view-front-page-hero").hover(
     function() { 
     if(continue){ 
      $('.view-front-page-hero .views-field-title').slideDown('slow', function() { 
       continue=false; 
      }); 
      } 
     }, 
     function() { 
     if(continue!){ 
      $('.view-front-page-hero .views-field-title').slideUp('slow', function() { 
       continue=true; 
      });  
      } 
     } 
    ); 
});

//這會讓你的代碼工作正確...

來源

2011-01-14 14:29:24 onront

如何在前一個動作仍在發生時阻止JQuery動作

回答

相關問題