1

こんにちは、

「プロファイルが更新されました」などのメッセージを表示するために、スライド DIV を使用したいと考えています。

これは私のコードです。ページを読み込むと DIV が下にスライドし、数秒後に消えます (遅延)。しかし、リンクを使用してタイムアウトになる前に DIV を閉じることができるようにしたいのですが、SlideUp を添付できません...なぜですか?

    $("#message").hide();

     $("#message").slideToggle('slow', function() {
        $(this).delay(2000).slideToggle("slow");
     });

    $("#close").click(function() {
        $("#message").slideUp();
    });  
    });

    <div id="message" style="display:none; border: 3px solid #ccc; width: 500px; height: 30px; background: #eee;">
    A message goes here! <a id="close" href="#" style="float: right;">Close div</a>
    </div>
4

2 に答える 2

1

close div クリック イベントに.stop()を追加してみてください。

$("#close").click(function() {
    $("#message").stop().slideUp();
});

jsfiddle の例

于 2011-01-25T13:21:29.737 に答える
0

これは、アニメーションが jQuery でキューに入れられるためです。効果は遅延効果が完了しslideUpた後にのみ実行され、要素はそれまでに非表示になります。slideToggle<div>

@Mark が示唆するように、遅延をキャンセルするにはstop()を呼び出す必要がありますがtrue、最初の引数を渡すことをお勧めします。

$("#close").click(function() {
    $("#message").stop(true).slideUp("slow");
});

そうすれば、現在実行中のものだけでなく、要素でキューに入れられたすべての効果<div>がクリアされます。

于 2011-01-25T13:30:45.250 に答える