jQuery mouseenter() and mouseleave() functions work repeatedly

4
votes

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>
3
jquerymouseentermouseleave
And the div is probably covering the image, so the mouseleave event is triggered, then it hides, and the mouseenter event triggers. Common issue. - adeneo
@Baris Demirel your code is working fine with the hover function jsbin.com/webec/1/edit. - mohamedrias
@adaneo Yes, it is. I did not think of it. Then, how can I do that? - Baris Demirel

3 Answers

7
votes

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.

3
votes

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/

0
votes

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/