jQuery的動畫回調射出序列

我正在創建一個UI組件，其中一個目標元素，當點擊時，引發一系列動畫。該動畫應該按順序發生：單擊目標元素（targetEl），透明疊加層將淡入目標元素（疊加層），另一個div向下滑過疊加層（幻燈片），幻燈片將有一個閉合圖標，當閉合圖標被點擊，之前的動畫發生在相反的位置（幻燈片向上滑動，覆蓋圖淡出）。jQuery的動畫回調射出序列

我的問題是這樣的：我使用嵌套.on（「click」）和動畫調用。該動畫完美適用於前幾次點擊，但在第3次或第4次點擊後表現奇怪。疊加層將快速淡入/淡出，而且根本看不到幻燈片的動畫。我認爲正在發生的事情是動畫以某種方式失序。

這裏是我JS/jQuery的：

$(targetEl).on("click", function() { 

    $(overlay).on("click", function(e){e.stopPropagation();}); 

    $(overlay).fadeIn("slow", function(){ 
     $(slideover).animate({"top":targetEl.height()/3}, 1000); 
    }); 

    $("#close").on("click", function(e){ 
      e.stopPropagation(); 

      $(slideover).animate({ 
       "top":'-'+targetEl.height()/3}, 1000, function({ 
         $(overlay).fadeOut("slow"); 
       }); 
      }); 
     });

我使用stopPropagation，我這樣做，因爲slideover是疊加的孩子，這是targetEl的孩子，我不想對孩子要點擊「通過「到父元素。任何幫助，非常感謝！

來源

2012-08-02 ginc

每當您基於（targetEL）點擊進行動畫製作時，您都會將新事件綁定到疊加點擊和#close元素。

這可能是它看起來很奇怪的原因。

執行那些綁定之前的到targetEL點擊觸發。

來源

2012-08-02 21:16:19

jQuery的動畫回調射出序列

回答

相關問題