Question

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

这一切都可以作为一个单独的元素使用，但我会有一个以上。

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

我尝试使用$（this）.find（''），但这没有任何效果。

有人可以帮忙吗？

这是JS小提琴。

$(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');

mouseenter正在应用于所有元素

2 个答案: