jQuery .append一次只能執行一次（目前多次出現）

我遇到了一個append問題。我使用的是「mouseenter」和「mouseleave」而不是onhover，因此append不會發生一百萬次，但我仍然遇到人們在div上進入和離開鼠標多次時間的問題。jQuery .append一次只能執行一次（目前多次出現）

要查看該問題，請轉到http://mercury-consulting.theportlandco.com/，並在頁面下方20％的位置將橫幅「基於雲」放在橫幅中。如果您隨後移動鼠標，然後連續多次重新添加，則附加操作會多次創建圖層和圖層。

這是我代碼的示例：

$("#cloud1").live("mouseenter", function() { 
$(this).append('<div class="cloud1" style="display:none"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="270"/></div>') 
.find('div.cloud1').show("slide", { direction: "down" }, 1100); 
}); 

$("#cloud1").live("mouseleave", function() { 
$(".cloud1").hide("slide", { direction: "down" }, 1100, function() { 
    $(this).remove(); 
}); 
});

來源

2011-04-19 Zach Nicodemous

你刪除mouse1後的cloud1 !!! – 2011-04-19 11:18:42

嘿人徘徊和追加div ID是一樣的！ – 2011-04-19 11:30:23

嘗試.show()和.hide()之前添加.stop()將停止動畫

來源

2011-04-19 11:19:45

使用.stop(true, true)在對象上被動畫化以取消前述動畫。

編輯：真正看到你的代碼，你可以做一些允許：

$('#cloud1, #cloud2, #cloud3').hover(function() { 
    var id = $(this).attr('id'); 

    // If a div isn't already available/animating, then create it 
    if (!$('div.' + id).length) 
    { 
     // Create and show the div 
    } 
    }, function() { 
    // slide the div down 
    } 
);

來源

2011-04-19 11:19:39

不錯，我不知道這些參數 – 2011-04-19 11:21:01

你可以有一個標誌，並驗證它是否關閉，如果是，則添加圖層並打開標誌;否則，不要追加圖層。

來源

2011-04-19 11:23:47 eKek0

你的代碼仍然有問題。檢查我把你在你的網站上實施stop()後的截圖：

enter image description here

通過保持鼠標懸停並進行激活DIV重現bug（「基於雲」爲例）的前幾次顯示動畫結束，然後停止「基於雲」的鼠標。

別人怎麼說（驗證，如果已經有一個.cloud1層有），可以集成到您的解決方案與append(function (idx,html))語法（DOC是here）：

$("#cloud1").bind("mouseenter", function() { $("#cloud1").append(function(idx, html) { if ($(html).find('.cloud1').size() == 0) { return '<div class="cloud1" style="display:none"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="270"/></div>'; } }).find('.cloud1').stop().show("slide", { direction: "down" }, 1100); });

最後，我用bind代替live因爲：

此方法（live（））是用於將事件處理程序附加到元素的基本.bind（）方法的變體。當調用.bind（）時，jQuery對象引用的元素獲取附加的處理程序;後面介紹的元素不是，所以它們需要另一個.bind（）調用。

由於您只有一個＃cloud1，並且以後不會引入其他人，所以您不需要live（）。

來源

2011-04-19 13:30:39 Niloct

jQuery .append一次只能執行一次（目前多次出現）

回答

相關問題