I have a piece of code that basically says: if you roll over this , then the other thing appears and if you roll out then it will disappear.

The problem is that if I take the mouse and roll over/out too many times then the elements appears/disappears too many times (because I have created a lot of events for it by mistake)

my code looks like this:

$('div.accordionContent').mouseenter(function()
{
    $(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() {
    $(this).find(".something").animate({
    left: -200}, 500);;
}); 

How do I tell it to avoid multiple hovering?

I use jQuery 1.4.3 if that helps..

I have a piece of code that basically says: if you roll over this , then the other thing appears and if you roll out then it will disappear.

The problem is that if I take the mouse and roll over/out too many times then the elements appears/disappears too many times (because I have created a lot of events for it by mistake)

my code looks like this:

$('div.accordionContent').mouseenter(function()
{
    $(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() {
    $(this).find(".something").animate({
    left: -200}, 500);;
}); 

How do I tell it to avoid multiple hovering?

I use jQuery 1.4.3 if that helps..

• javascript
• jquery
• html

5 Answers 5

Rather than avoiding multiple triggering, try stopping the animation before starting another.

$('div.accordionContent').mouseenter(function() {
    $(this).find(".something").stop().animate(...)
}); 

The problem is you fire new events before the old ones have finished. To prevent this you could stop listening (remove the listeners) for future events until the current events have finished their tasks.

jQuery.animate has an option "queue". If you set that to false, I think the event won't trigger as much. I think =)

If you wanna do it the correct way, i suggest this

$('div.accordionContent').bind('mouseenter mouseleave', function(e){

    var $something = $(this).find(".something");

    if(e.type == 'mouseenter'){
        $something.animate({left:0}, {queue:false, duration:300 });
    } else {
        $something.animate({left:-200}, {queue:false, duration:500 });
    }
});

You can try this one:

$('div.accordionContent').mouseenter(function(){
    var div = $(this);
    clearTimeout(window.me);
    window.me = setTimeout(function(){
        div.find(".something").animate({left: 0}, 300)}).mouseleave(function(){
            $(this).find(".something").animate({
            left: -200}, 500); 
        });
    },50);
}); 

The idea here is to cancel the current mouseenter if the 50 delay isn't reached yet.