javascript - delay mouseenter event and raise event if mouse inside the element - Stack Overflow

admin管理员组

文章数量:1287613

I use this tab view that developed base on jQuery:

.html#

I change the code that tabs change by mouseenter event. and I want to delay execution of the mouseenter event so if mouse enter the elemnt and remain there for portion of time mouseenter executes else (if mouse go outside in time less that that portion of time) mouseenter does not execute.I write this code:

$(document).ready(function () {
        $('a.tab').on('mouseenter', function () {
            var thisElement = $(this);
            setTimeout(function () {
                $(".active").removeClass("active");
                thisElement.addClass("active");
                $(".content").slideUp();
                var content_show = thisElement.attr("title");
                $("#" + content_show).slideDown();
            }, 300);
        });
    }); 

but if I bring mouse out of element mouseenter excecutes.How to solve this problem?

thanks

I use this tab view that developed base on jQuery:

https://d2o0t5hpnwv4c1.cloudfront/001_Tabbed/site/jQuery.html#

I change the code that tabs change by mouseenter event. and I want to delay execution of the mouseenter event so if mouse enter the elemnt and remain there for portion of time mouseenter executes else (if mouse go outside in time less that that portion of time) mouseenter does not execute.I write this code:

$(document).ready(function () {
        $('a.tab').on('mouseenter', function () {
            var thisElement = $(this);
            setTimeout(function () {
                $(".active").removeClass("active");
                thisElement.addClass("active");
                $(".content").slideUp();
                var content_show = thisElement.attr("title");
                $("#" + content_show).slideDown();
            }, 300);
        });
    }); 

but if I bring mouse out of element mouseenter excecutes.How to solve this problem?

thanks

• javascript
• jquery
• asp
• html

Share Improve this question Follow asked Apr 10, 2012 at 7:32 DooDooDooDoo 13.5k7070 gold badges190190 silver badges317317 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

You need to store the timeout handle and cancel it on mouseleave:

var timeout; 

$(document).ready(function () {
    $('a.tab').on('mouseenter', function () {
        var thisElement = $(this);

        if (timeout != null) { clearTimeout(timeout); }

        timeout = setTimeout(function () {
            $(".active").removeClass("active");
            thisElement.addClass("active");
            $(".content").slideUp();
            var content_show = thisElement.attr("title");
            $("#" + content_show).slideDown();
        }, 300);
    });

    $('a.tab').on('mouseleave', function () {
        if (timeout != null) { 
           clearTimeout(timeout); 

           timeout = null;
        }
    });
}); 

本文标签： javascriptdelay mouseenter event and raise event if mouse inside the elementStack Overflow