Question

I have an image container with a caption and when I hover over it I intend for the caption to slide in, for which I am using jQuery slideToggle. Here is the code…

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


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

Here’s a working version: http://jsfiddle.net/HZAHg/

…It works flawlessly. However, I have multiple instances of it so when I hover over one of them they all activate. How do I make it so only one of them activates at a time (the one I hover over)?

Thanks.

Answer 1

Try this:

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

Because the image is being hovered over, ‘this’ refers to the image. If you put something after the comma in the selector, that means to only look inside of that set of nodes for the selector. So here we are saying “look inside of the ‘.image’ node that was hovered over (this) and look for .caption inside of that”.

Hope this helps.