Mouseleave doesn't trigger when Mouseenter is not completed yet

Question

I'm having a problem with mouseenter and mouseleave with jquery.

When entering a div, the mouseenter function will start. When I leave the div before the mouseenter is completed, the mouseleave wont trigger.

I have made a jsfiddle to make it easier to understand.

http://jsfiddle.net/8sLLD/1/

code:

$("#menu1").mouseenter(function() {
   //code

})
    $("#image").mouseleave(function () {
    //code
});

So, when entering the button, an image appears. When you leave the button before the image has appeared (before your cursor touches the image) the mouseleave won't trigger.

EDIT: When using #menu for the mouseleave, the image will act very weird when just "moving" the mouse.

I know there are already some questions like this, but none of them worked for me.

Thanks a lot and sorry for my english

Of course it won't, the mouseleave event is bound to the image, what did you expect ? — adeneo
"When you leave the button before the image has appeared (before your cursor touches the image) the mouseleave won't trigger." Why it should? Could you post a relevant jsfiddle? — A. Wolff
But when I bind the mouseleave event to the div, it will also trigger when just hovering over the image. How could I fix that? (that's actually my question.) @Wolff It should trigger the mouseleave because the image will just stay there. — Colinch
i guess you have to stop propagation or use mouseover event. But in which way this is relevant to your posted jsfiddle or code? — A. Wolff
Sorry for that! I posted the wrong fiddle. I've updated the link. Sorry — Colinch

Irvin Dominin Irvin Dominin · Accepted Answer · 2013-12-11T19:47:32

You can use a hover event handler to set your in and out handler function.

Is more simple if you set your hover on a wrapping element like #p2, so it will be fired when you enter/exit the wrapper not its children.

Code:

 $('document').ready(function () {
     $("#p2").hover(function () {
         $(this).css("cursor", "pointer")

         $("#image").css("left", "75");
         $("#image").stop().animate({
             width: "145px",
             height: "145px",
             left: "0"
         }, 'slow');

         $("#c").animate({
             top: "100"
         }, 'slow');

     }, function () {
         $("#image").stop().animate({
             width: "0%",
             height: "0%",
             left: "75"
         }, 'slow');
         $("#c").animate({
             top: "0"
         }, 'slow');
     });
 });

Demo: http://jsfiddle.net/qwPvv/

Mouseleave doesn't trigger when Mouseenter is not completed yet

1 Answers