1

タイムアウト関数を備えたjqueryを少し書いたので、要素に一定時間カーソルを合わせると、さらにボタンが表示され、そのボタンにカーソルを合わせると記事の詳細が表示されます。

これはすべて個別の要素として正常に機能しますが、1つ以上使用します。

1つにカーソルを合わせるたびに、エフェクトがすべての要素に適用されます。

$（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);

});

}）;

4

2 に答える 2

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

于 2013-02-19T22:36:07.587 に答える
0

ソリューションには次のものが含まれる可能性があります-（thisタイムアウト内の関数外で変数を設定する）

$('.articleContainer').mouseenter(function () {
    var el = this;
    myTimeout = setTimeout(function () {
        $(el).find('.moreBtn').animate({
            'top': '0px'
        }, 'normal');
于 2013-02-19T22:38:44.887 に答える