jQuery mouseenter() and mouseleave() functions work repeatedly

Question

I have a picture and a div. The div is hidden(display:none;). I want to show the div when mouse is over the picture and hide the div again when mouse is not over the picture. I use mouseenter() and mouseleave() events to do this but when moue is over the picture, both of the functions work repeatedly. Here is the code that I define functions:`

$("#pic").mouseenter(function(){
  $("#checkin").slideDown();
});
$("#pic").mouseleave(function(){
  $("#checkin").slideUp();
});

I also tried the hover method but the result is the same.

$("#pic").hover(
  function(){
    $("#checkin").slideDown(200);
  },
  function(){
    $("#checkin").slideUp(200);
  }
);

What is the problem, I can't understand.

Update: Here is the HTML code

<tr><td valign='top' class='checkinpic'><img src='img.png' id='pic' height='100%'></td></tr>

...

<div id='checkin'>
You are not going to any activity this week.
</div>

Fromma

And the div is probably covering the image, so the mouseleave event is triggered, then it hides, and the mouseenter event triggers. Common issue. – Jennings

@Baris Demirel your code is working fine with the hover function jsbin.com/webec/1/edit. – Allahabad

@adaneo Yes, it is. I did not think of it. Then, how can I do that? – Fromma

Answer 1

I found the solution. When I changed the element that works with the mouseleave event, it worked:

var block = false;
$("#pic").mouseenter(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideDown(400, function(){
        block = false;
    });
}
});
$("#pic").mouseleave(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideUp(400, function(){
        block = false;
    });
}
});

Thank you for your help.

Update: I noticed that giving both the picture and div a class and defining the mouseenter and mouseleave events of the class is a better solution.

Fromma

Answer 2

May fix something like this:

var block = false;
$("#pic").mouseenter(function(){
    if(!block) {
        block = true;
        $("#toggleDiv").slideDown(400, function(){
            block = false;
        });
    }
});
$("#pic").mouseleave(function(){
    if(!block) {
        block = true;
        $("#toggleDiv").slideUp(400, function(){
            block = false;
        });
    }
});

http://jsfiddle.net/BnPJ4/

Gypsophila

Yes, it solved the repetition problem, but now, mouseleave function does not work. So it works for one time, until the div is shown. – Fromma

Answer 3

Here is the solution edited from ur code, hope it will help full for u.

$("#pic").hover(function() {
    $("#checkin").slideDown(200);
},
function() {
    $("#checkin").slideUp(200);
});

click the link below to run the code

http://jsfiddle.net/ByZ2z/5/

Imbibition

The same problem continues, I want the div to show over the picture, that's why it repeats. – Fromma

Answer 4

I know this doesn't exactly answer your question, but... I think I can add my 5 cents here:

In my experience, a lot of things and subtleties go under the bridge when you have to properly implement a solution delivering mouseover/mouseleave functionality.

Since you are already using jQuery and relying on it doesn't mean you need to incorporate a new library into your code, I suggest you consider hoverIntent, which will basically take care of things like users accidentally/quickly passing the mouse through a given element. The script will basically try to understand if the user had the intention of actually hovering an element, and it will possibly ignore it in case it was a very quick action.

The implementation of hoverIntent is also very easy.

Here is where you can find the script.

On your code, you can simply refer to the jquery.hoverIntent.min.jsfile.

Now, the implementation is as simple as:

    $("#pic").hoverIntent({

      // hover is on
      over: doSomething(),
      
      // hover is off
      out: doSomethingElse();
      },

      timeout: 50
    });

timeout allows you to calibrate the reaction time of your script (whether quicker or lazier to respond to user's hover action).

Pantile