web-dev-qa-db-ja.com

jQuery：append（）オブジェクト、remove（）with delay（）

それのどこが悪いんだい？

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').delay(2000).remove();

Htmlドキュメントに成功メッセージを追加したいのですが、2秒間だけです。その後、divを再度削除する必要があります。

ここで何が間違っていますか？

よろしく

jqueryappenddelay
39
matt

setTimeout() を直接使用する（これは .delay() 内部で使用します） .remove() はキュー関数ではありません。全体的には次のようになります。

_$('body').append("<div class='message success'>Upload successful!</div>");
setTimeout(function() {
  $('.message').remove();
}, 2000);
_

ここで試してみることができます 。

.delay() は、アニメーション（または任意の名前の）キュー用です。これを使用するには、次のようにする必要があります。

_$("<div class='message success'>Upload successful!</div>").appendTo('body')
  .delay(2000).queue(function() { $(this).remove(); });
_

ここで動作します ...しかし、IMOを連鎖させるために、やり過ぎでひどく非効率的です。通常、dequeueまたは次の関数も呼び出す必要がありますが、とにかく要素を削除しているので...

96
Nick Craver

私はそれを行う正しい方法はjQueryキューメソッドを使用することだと思います：

    $("<div class='message success'>Upload successful!</div>")
        .appendTo('body')
        .delay(2000)
        .queue(function() {
            $(this).remove();
        });
8
Viktor Kruglikov

古いjQueryを使用しているのかもしれませんが、他の回答で提案されている方法はどれも役に立たないようです。 http://api.jquery.com/delay/ によると、遅延はアニメーション効果のためです。

ただし、setTimeout()を使用すると、うまく機能します。

$('body').append("<div class='message success'>Upload successful!</div>"); 
setTimeout(function(){
    $(".message").remove();
}, 2000);
2
WSkid

そしてキックのためだけに、遅延を使用して以下を行うことができます：

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').show('fast').delay(2000).hide('fast')
$('.message').remove();
0
Strelok