0

ページの端にある単純な DIV を作成し、これを移動する単純なスクリプトを作成しました。

問題は、マウスを DIV の上に置いてからカーソルを持ったときです。DIV を非表示にして再度カーソルを DIV に移動すると、スクリプトは常に DIV を取り出して非表示にします。

私の問題をよりよく説明するために、jsFiddle.com で「Fiddle」を作成しました: http://jsfiddle.net/IdolwSzutrab7/DWvbJ/、および問題を示すアニメーション gif:

$('#h53pg4s4b6').hover(function () {
    $('#h53pg4s4b6').delay(400).animate({
        right: "3px"
    }, 1300);
    $('#u26c5lsx9h').animate({
        opacity: "1.0"
    }, 500);
    clearTimeout(time3);
}, function () {
    time3 = setTimeout(function () {
        $('#h53pg4s4b6').animate({
            right: "-220px"
        }, 1300);
        $('#u26c5lsx9h').delay(1400).animate({
            opacity: "0.2"
        }, 500);
    }, 1000)
})

 $('#t895o6n9qs').click(function () {
    $('#b37jjlmy2t').css('display', 'block');
    $('#a15tnjlyw6').css('display', 'none');
})

 $('#u83mz78d5l').click(function () {
    $('#b37jjlmy2t').css('display', 'none');
    $('#a15tnjlyw6').css('display', 'block');
})

 $('#s4iu2h7dra').click(function () {
    $('#h53pg4s4b6').fadeOut(3000, function () {
        $('#h53pg4s4b6').remove();
    });
})

http://i.stack.imgur.com/BxVDK.gif

方法 ...

スクリプトを停止するには？

か否か ...

私は知らない ...

多分私は別のスクリプトを書くべきですか？

私はそれについて何ができるかわかりません:/

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

助けてくれますか？

PS: 英語で申し訳ありませんが、理解していただければ幸いです。

4

1 に答える 1

0

ここでjQuery.stop()が役に立ちます

ここで更新されたJSFiddleを参照してください

次のようにコードを更新しました

$('#h53pg4s4b6').hover(function () {
    $('#u26c5lsx9h').stop().animate({
        opacity: "1.0"
    }, 500, function () {
        $('#h53pg4s4b6').stop().animate({
            right: "3px"
        }, 1300);
    });
    clearTimeout(time3);
}, function () {
    time3 = setTimeout(function () {
        $('#h53pg4s4b6').stop().animate({
            right: "-220px"
        }, 1300);
        $('#u26c5lsx9h').stop().animate({
            opacity: "0.2"
        }, 500);
    }, 1000)
})

また、1 つの提案があります。delay() 関数を削除しても効果はよりスムーズになるため、削除してもかまいません。

于 2013-01-23T16:56:05.037 に答える