CODEWITHSUNDEEP
javascriptjquerycssmouseover
iosfreak
iosfreak

Reputation: 5238

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

Upvotes: 0

Views: 2027

Answers (2)

Tom Walters
Tom Walters

Reputation: 15616

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.

Upvotes: 2

James Allardice
James Allardice

Reputation: 165971

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).

Upvotes: 0

Related Questions