CODEWITHSUNDEEP
jquerymouseentermouseleave
Baris Demirel
Baris Demirel

Reputation: 150

jQuery mouseenter() and mouseleave() functions work repeatedly

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>

Upvotes: 5

Views: 39299

Answers (4)

Marcos Buarque
Marcos Buarque

Reputation: 3418

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).

Upvotes: 0

Baris Demirel
Baris Demirel

Reputation: 150

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.

Upvotes: 7

Runny
Runny

Reputation: 9

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/

Upvotes: 0

Magistr_AVSH
Magistr_AVSH

Reputation: 368

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/

Upvotes: 4

Related Questions