爲什麼這些jquery事件同步觸發？

給定一個頁面上的一些'.hovertarget'div，下面的鼠標懸停/鼠標懸停事件似乎是同步觸發的 - 也就是說，如果您快速將鼠標從一個項目（A）移動到另一個項目（B），則B fade-在A淡出完成之前不會啓動。如果你快速做到這一點，那麼你會有一系列的淡入/淡出幾秒鐘。 這不是我想要的行爲。我該如何改變這一點，以便事件彼此獨立？爲什麼這些jquery事件同步觸發？

我使用jQuery 1.6.2

$(".hovertarget").live('mouseover mouseout', function(event) { 
    var child = $(event.target).find(".targetchild"); 
    if (event.type == 'mouseover') { 
     child.fadeIn(200); 
    } else { 
     child.fadeOut(200); 
    } 
});

HTML此應用（如需要）：

<div class="hovertarget" id="s1"><div class="targetchild"></div></div> 
    <div class="hovertarget" id="s2"><div class="targetchild"></div></div>

來源

2011-09-06 UpTheCreek

你嘗試使用**。停止（）**方法停止animiation？ – Anatoly

你是否嘗試過使用fadeTo，你也應該使用delegate而不是live。這是一個簡單的變化$（「。hovertarget」）。live to $（「。hovertarget」）。delegate，應該是一樣的。同樣在這種情況下，fadeTo會更好地工作，因爲它不會應用display：none，否則可能會產生抖動效果或其他不需要的效果。 – Matt

@matt - 不會嘗試。現場和委託有什麼區別？（我正在使用，因爲這些是動態添加的元素）。 – UpTheCreek

你將不得不停止以前的動畫，如果它未完成然而。動畫進入隊列，除非您告訴它停止當前動畫並清除隊列。你可以這樣添加停止（）命令：

$(".hovertarget").live('mouseover mouseout', function(event) { 
    var child = $(event.target).find(".targetchild"); 
    if (event.type == 'mouseover') { 
     child.stop(true, true).fadeIn(200); 
    } else { 
     child.stop(true, true).fadeOut(200); 
    } 
});

有關參數的詳細信息，請參見doc for .stop()。

來源

2011-09-06 07:45:03 jfriend00

謝謝 - 這似乎足夠好了，但對我來說這並不完美，因爲我不希望div a的「淡出」動畫被取消，只是因爲我開始淡入div B.我假設每個dom對象都有它自己的隊列 - 對我來說似乎很奇怪他們會互相干擾。再次感謝。 – UpTheCreek

他們每個人都有自己的隊列，你可能會打電話給.stop（）而不是你所關心的。你的HTML，我們可能會提供一些幫助。你是否100％肯定「孩子」只是一個單一的對象，並不比你想要的更多？ – jfriend00

奇怪。我已經添加了相關的HTML（非常基本）。由於從event.target節點中選擇了孩子，我不明白我是如何錯誤地選擇多個孩子的。讓我延長淡入淡出時間來檢查我沒有想象的東西。 – UpTheCreek

使用

child.stop(true, true).fadeIn(200);

和

child.stop(true, true).fadeOut(200);

來源

2011-09-06 07:45:03 AlexBay

我剛剛試過這個，它似乎不工作 - 如果你在兩者之間滑動，它會導致事件（或至少任何動畫）完全停止發射。 – UpTheCreek

它需要第二個參數才能正常工作，編輯 – AlexBay

右鍵 - 謝謝。 – UpTheCreek

爲什麼這些jquery事件同步觸發？

回答

相關問題