CODEWITHSUNDEEP
javascriptjqueryhtml
Cam
Cam

Reputation: 970

JQuery - How to suppress mouseleave event?

I have an image with a play/pause button positioned absolute and centered over top.

see example; http://jsfiddle.net/GuJWk/3/

The button appears when the user hovers over the img, and disappears when the mouse leaves the image.

The problem i'm having is a flicker when the user hovers over the button, i suspect its because the images mouse out event has been triggered.

I know what the problem is and whats causing it, but i can't fix it. I don't want to nest the pauseplay button, to get it working either. I just need to manage the bubbling events some how..

Thanks, Cam

Upvotes: 0

Views: 152

Answers (2)

r_31415
r_31415

Reputation: 8972

Does this solve your problem?

http://jsfiddle.net/eHerL/

$("body").on("mouseover", "img", function(){
    $('#pauseplay').stop(true,true).fadeIn(1000);
}).mouseleave(function(){
    $('#pauseplay').stop(true,true).fadeOut(1000);
});​

Upvotes: 2

Rob W
Rob W

Reputation: 348972

Add a .mouseenter event to $('#pauseplay'), which cancels the animation on hover:

$('#pauseplay').mouseenter(function(){
    $(this).stop(false,false);
}).hide();

Demo: http://jsfiddle.net/GuJWk/11/

Also, $().hover(fn1, fn2) is a shorthand for $().mouseenter(fn1).mouseleave(fn2).

Upvotes: 2

Related Questions