如何擁有一個jQuery效果的多個實例

首先，免責聲明 - 我只是從jQuery開始。我爲我的不稱職道歉。 :)如何擁有一個jQuery效果的多個實例

我的問題是，我試圖對頁面上一堆單獨的元素使用jQuery翻轉效果。現在，當我將鼠標放在一個上面時，它們都會立即執行該效果，因爲它們具有相同的類名，並且jQuery正在選擇它們。我知道我可以爲每個名稱使用不同的名稱，併爲每個類別單獨編寫一段jQuery，但有沒有更好的方法？我計劃擁有許多這些元素。

無論如何，一張圖片勝過千言萬語。查看我的測試頁面的來源：Click Here將鼠標懸停在「測試」圖像上。我希望效果能夠適用於您將鼠標懸停的效果。

這是我的新手的jQuery：

$(document).ready(function(){ 

$('.box').hover(function() { 
$('.rollover').fadeIn('slow'); 
$('.description').fadeIn('fast'); 
}); 

$('.box').mouseleave(function() { 
$('.rollover').fadeOut('slow'); 
$('.description').fadeOut('fast'); 
}); 


});

來源

2010-08-16 KThornbloom

好問題，我一直在給所有的單獨ID直到這一點。 – Gallen 2010-08-16 20:55:11

$('.box').hover(function() { 
    $(this).next('.rollover').fadeIn('slow'); 
    $(this).find('.description').fadeIn('fast'); 
}, function() { 
    $(this).next('.rollover').fadeOut('slow'); 
    $(this).find('.description').fadeOut('fast'); 
});

的.hover()方法接受功能火mouseenter和mouseleave。

在每個函數中，this關鍵字指的是接收事件的.box元素。然後，您使用.find()來獲取嵌套.description和.next()以獲取相鄰兄弟.rollover。

在你的情況，你可以使用.siblings('.rollover')而不是.next()如果你想。

http://api.jquery.com/siblings/

來源

2010-08-16 20:59:09 user113716

+1，但是可以添加一個解釋，因爲它很好地說明了「this」的作用。 – chryss 2010-08-16 21:02:58

@chryss - 是的，我已經更新了我的答案，並解釋了「this」代表什麼。那是你的意思嗎？ – user113716 2010-08-16 21:06:20

小心使用'this'關鍵字;它並不總是解決你的想法。 – palswim 2010-08-16 21:08:28

如果我能選擇其中一個的時間，我想我可以應用效果只對自己的孩子。我只希望你可以告訴jQuery只選擇你的鼠標是否沒有說明ID或類別...

來源

2010-08-16 21:01:18 KThornbloom

如何擁有一個jQuery效果的多個實例

回答

相關問題