僅影響元素的一個實例來激活jQuery行爲？

Question

我有一個帶有標題的圖像容器，當我將鼠標懸停在它上面時，我打算讓標題滑入，爲此我使用jQuery slideToggle。下面是代碼...

<div class="image"> 
    <div class="caption">Caption Content</div> 
</div> 


$('.image').hover(function() { 
    $('.image .caption').slideToggle('slow', function() { 
    // Animation complete. 
    }); 
}); 

這裏有一個工作版本：http://jsfiddle.net/HZAHg/

...它完美的作品。但是，我有多個實例，所以當我將鼠標懸停在其中的一個上時，它們都會激活。我該如何做到這一點，只有其中一個激活（我懸停的那個）？

謝謝。

Answer 1

嘗試這種情況：

$('.image').hover(function() { 
    $(".caption", this).slideToggle('slow', function() { 
    // Animation complete. 
    }); 
});​ 

由於圖像被懸停， '這個' refe rs到圖像。如果您在選擇器中的逗號後添加了某些內容，則意味着僅查看該選擇器的該組節點的內部。因此，我們在這裏說「看看懸停在（this）上的'.image'節點的內部並在那裏尋找.caption」。

希望這會有所幫助。

Answer 2

嘗試這種情況：

$('.image').hover(function() { 
    $('.caption', this).slideToggle('slow', function() { 
    // Animation complete. 
}); }); 

Answer 3

嘗試這種情況：

$('.image').hover(function() { 
    $('.caption', this).slideToggle('slow', function() { 
     // Animation complete. 
    }); 
}); 

Updated fiddle