Invalid workaround for setTimeout combined with Mouseenter

Question

$(".item-holder").each(function(){
    $(this).bind("mouseenter", function(e) {
        e.preventDefault();
        var t = setTimeout(function(){
            $(this).find(".mindex-blog-meta").animate({
                left:"0"
            },500);
            $(this).find(".ret").animate({
                top:"60%"
            },600);
        });
    },300)
});

$(".item-holder").each(function(){
    $(this).bind("mouseleave", function(e) {
        e.preventDefault();
        clearTimeout(t);
        $(this).find(".mindex-blog-meta").animate({
            left:"-60%"
        },500);

        $(this).parent().find(".ret").animate({
            top:"100%"
        },600);
    });
});

Answer 1

Here is an article that explains it in great detail, as well as an online example:

http://www.aijquery.cn/Html/jqueryjiqiao/130.html

Answer 2

1. If you encounter multiple elementsand need to bind the same event processing, use an event proxy instead, that is, bind the event to the common parent element of these elements, and then use the selector to hit the specified element. See the documentation for specific methods;

2. If you wantclearTimeout(), the variable must be found. The variable t you declare in the anonymous function is trapped in the scope and cannot be come out~

3. No needsetTimeout, don’t jQ’s animations have delays?

Use stop to achieve the effect of

4. clearTimeout().