jquery - mouseenter 正在应用于所有元素

Question

我已经编写了一些具有超时功能的 jquery，因此在您将鼠标悬停在元素上一段时间后，会出现一个更多按钮，然后将其悬停以查看有关文章的更多信息。

这一切都可以作为一个单独的元素正常工作，但我会拥有不止一个。

每次我将鼠标悬停在一个上时，效果都会应用于所有元素。

我试过使用 $(this).find('') 但这没有任何效果。

任何人都可以帮忙吗？

这是JS小提琴。

http://jsfiddle.net/8x429/

$(document).ready(function () {
// Article hover function   
var myTimeout;

$('.articleContainer').mouseenter(function () {

    myTimeout = setTimeout(function () {

        $('.moreBtn').animate({
            'top': '0px'
        }, 'normal');
        $('.moreBtn').hover(function () {
            $('.moreDetail').animate({
                'top': '0px'
            }, 'slow');
        });

    }, 500);

})

    .mouseleave(function () {
    $('.moreDetail').animate({
        'top': '-335px'
    }, 'fast',

    function () {

        $('.moreBtn').animate({
            'top': '40px'
        }, 'fast');

    });

    clearTimeout(myTimeout);

});

});

Answer 1

确保您在函数范围闭包之外引用了您想要的项目。

$(document).ready(function () {
    // Article hover function   
    var myTimeout;

    $('.articleContainer').mouseenter(function () {
        var article = $(this);
        var moreButton = $(article).find('.moreBtn');
        var moreDetail = $(article).find('.moreDetail');
        myTimeout = setTimeout(function () {

            moreButton.animate({
                'top': '0px'
            }, 'normal');
            moreButton.hover(function () {
                moreDetail.animate({
                    'top': '0px'
                }, 'slow');
            });

        }, 500);

    });

        .mouseleave(function () {
        var article = $(this);
        var moreButton = $(article).find('.moreBtn');
        var moreDetail = $(article).find('.moreDetail');
        moreDetail.animate({
            'top': '-335px'
        }, 'fast',

        function () {

            moreButton.animate({
                'top': '40px'
            }, 'fast');

        });

        clearTimeout(myTimeout);

    });
});

jsfiddle

Answer 2

一个解决方案可能包含以下内容 - （this在超时内设置函数外部的变量）

$('.articleContainer').mouseenter(function () {
    var el = this;
    myTimeout = setTimeout(function () {
        $(el).find('.moreBtn').animate({
            'top': '0px'
        }, 'normal');