最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to prevent mouse enterleave to occur too many times - Stack Overflow

programmeradmin3浏览0评论

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

Share Improve this question edited Dec 12, 2011 at 9:00 Ronald Wildenberg 32.1k17 gold badges94 silver badges133 bronze badges asked Dec 12, 2011 at 8:59 AlonAlon 7,75820 gold badges64 silver badges100 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 6

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.

发布评论

评论列表(0)

  1. 暂无评论