jQuery blinking mouseOver issue

I have a image that has a caption开发者_如何转开发 displayed on it. The caption floats over the image and is displayed at the bottom.

I have a jQuery event that when you rollover the image, it displays the caption. Like so:

function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}

And when you roll out:

function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}

However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?

Here's a link: Example

Thanks, Coulton

I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.

Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:

$("#caption").mouseover(function() { 
    $(this).stop(); 
});

The stop function cancels any animation that is running on the selected element (in this case, the caption element).