如何防止jQuery .hover函數同時影響所有圖像？

我不確定標題是否足夠好解釋，但試圖保持它很短！如何防止jQuery .hover函數同時影響所有圖像？

所以，我有一些分散在一個頁面周圍的圖像，併爲它們創建了一個lightbox庫（.cboxElement是調用它的類）。我想添加到這是一個懸掛效果對每個圖像影響的燈箱，所以用戶知道它可以放大。

問題：

我沒有寫該網站的原代碼，這是一個新的功能。由於整個圖像的各種類的不一致，我在前面加上了懸停的方法是指一類獨特的每個圖像前的標記，如下所示：

$("a.cboxElement").each(function(){ 
     $(this).prepend("<span class='zoom'></span>"); 
    });

緊接着這一點，我已經使用了懸停效果：

$("a.cboxElement").hover(function(){ 
     $("a.cboxElement span").fadeIn('fast'); 
    }, 
    function(){ 
     $("a.cboxElement span").fadeOut('fast'); 
    });

的問題是，當我將鼠標懸停在頁面上的圖片，懸停效果每幅圖像上同時出現，我不知道如何得到它只會影響我徘徊在圖像過度。

有沒有人有什麼想法，我可以做什麼？

非常感謝，

喬恩

來源

2011-08-26 Jon

位新的這個所以希望我把這個在正確的地方！只是想添加其他東西，我發現任何人發現此線程有用，通過在.find後面添加.stop（true，true）它立即停止當前動畫並開始下一個 - 如果有人在開始/以前的效果已經完成，否則動畫與用戶操作不及時。發現信息在這裏 - http://stackoverflow.com/questions/5722758/jquery-fadetoggle-if-currently-animated-ignore-further-input – Jon

我想你只需要改變的範圍你的懸停作業：

$("a.cboxElement").hover(function(){ 
    $(this).find("span").fadeIn('fast'); 
}, 
function(){ 
    $(this).find("span").fadeOut('fast'); 
});

您的原始代碼是這樣說的：對於每個a.cboxElement，找到所有a.cboxElement元素'span s並淡入/淡出。上面的代碼說每個a.cboxElement，懸停時，找到span只是這a.cboxElement並淡入/淡出。

來源

2011-08-26 13:41:31

乾杯科裏，完美的作品！感謝您解釋我原來的代碼實際上在說什麼，非常有用 – Jon

@Jon，歡迎您，歡迎來到SO。對於您找到有用且準確的答案，請記得點擊旁邊的複選標記將其標記爲「已接受」答案。 –

@CoryAll完成 - 不會讓我投票，但沒有足夠的代表！ – Jon

分配一個id="..."屬性，每一個圖像，然後選擇它，而不是整個a.cboxElement類：

<img id="imageid1" ... > 
$('#imageid1')....

來源

2011-08-26 13:40:40 Blazemonger

$("a.cboxElement").hover(function(){ 
    $(this).find('span:first').fadeIn('fast'); 
}, 
function(){ 
    $(this).find('span:first').fadeOut('fast'); 
});

來源

2011-08-26 13:41:41

此外，您還可以使用.fadeToggle與單一功能：

$("a.cboxElement").hover(function(){ 
    $(this).find("span").fadeToggle("fast"); 
});

來源

2011-08-26 13:44:38 karim79

只要我看到這個，我想，是的，這就是我應該做的 - 但由於某種原因，它不工作...我會玩弄它，看看我得到什麼，但爲理念 – Jon

如何防止jQuery .hover函數同時影響所有圖像？

回答

相關問題