jQuery：追加（）对象，删除（）它与延迟（）答案

【问题标题】：jQuery: append() object, remove() it with delay()jQuery：追加（）对象，删除（）它与延迟（）
【发布时间】：2011-04-09 00:15:06
【问题描述】：

这有什么问题？

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

我想在我的 html 文档中附加一条成功消息，但仅持续 2 秒。之后应该再次删除 div。

我在这里做错了什么？

问候

【问题讨论】：

标签： jquery append delay

【解决方案1】：

我认为正确的做法是使用 jQuery 队列方法：

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

【讨论】：

【解决方案2】：

也许我使用的是过时的 jQuery，但其他答案中建议的方法似乎都不适合我。根据http://api.jquery.com/delay/，延迟是为了动画效果。

不过，使用 setTimeout() 对我来说效果很好：

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

【讨论】：

不要将字符串传递给setTimeout()!，传递匿名函数:)

【解决方案3】：

在这里直接使用setTimeout()（.delay() 在内部使用）更简单，因为.remove() 不是队列函数，总体上应该如下所示：

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

You can give it a try here.

.delay() 用于动画（或任何名称）队列，要使用它，您必须执行以下操作：

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

Which works, here...但是为了链接 IMO，这只是矫枉过正而且效率极低。通常你还必须调用 dequeue 或 next 函数，但是因为你无论如何都要删除元素......

【讨论】：

+1 始终提供与您之前为我提供的答案类似的良好 jquery 答案...
@Shog9 - 完全准确地说，它不是只是动画，它只是默认情况下fx队列动画继续运行，但如果传递了名称，它可以是任何队列:)
糟糕，因为您更新了答案，所以删除了该评论。但你是对的，队列支持是相当通用的，并且可以用于其他用途 - 动画只是默认使用它。
@Shog9 - 我只是希望 .delay() 在 1.5 中获得对队列/动画集成的喜爱，以便 .stop(true, true) 清除当前根本没有存储的超时...给一些目前非常奇怪和意想不到的副作用，IMO 宣传的不够。
@mattsoave 如果您想创建/删除一个，只需保留对它的引用，如下所示：var m = $("<div class='message success'>Upload successful!</div>").appendTo("body"); 并改用m.remove();。

【解决方案4】：

只是为了好玩，您可以使用延迟执行以下操作：

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

【讨论】：

@Shog9。你说的对。我只是让它在一个jsfiddle中工作......一定是一个不同的sn-p。很奇怪。
在查找 setTimeout 时偶然发现了这个问题和答案，发现您仍然处于活动状态。不知道你是否可以在 2010 年做到这一点，但现在你可以在 hide 函数中使用函数作为第二个参数。所以只是为了踢你可以做$('.message').show('fast').delay(2000).hide('fast', function(){$('.message').remove()}); =)