jquery - 只影响一个元素的一个实例来激活 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.
    });
});​

因为图像被悬停在上面，所以“this”指的是图像。如果你在选择器中的逗号后面放了一些东西，这意味着只在选择器的那组节点内部查看。所以在这里我们说“查看悬停在（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.
    });
});

更新的小提琴