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 ```

``` ... ```

You are not going to any activity this week.

```

Accepted Answer

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.

jQuery mouseenter() and mouseleave() functions work repeatedly

Solution

Problem