5秒后JQuery删除.append答案

【问题标题】：JQuery remove .append after 5 seconds5秒后JQuery删除.append
【发布时间】：2011-02-15 11:52:07
【问题描述】：

哦，天哪，今天来了很多 - 哎呀

伙计们，最好的方法是：

$j('.done').append('Your services have been updated');

（完成的部分）

然后在说 5 秒后删除附加，这样如果一个人重新提交表单（允许），附加不会继续添加文本？即更新一次“您的服务已更新”，两次将显示“您的服务已更新您的服务已更新”，但我只希望您的服务已更新显示一次

【问题讨论】：

标签： jquery timeout

【解决方案1】：

(function (el) {
    setTimeout(function () {
        el.children().remove('span');
    }, 5000);
}($j('.done').append('<span>Your services have been updated</span>')));

我知道这看起来很奇怪。我这样做是为了自我控制。调用该匿名函数时会立即完成追加...然后将该附加元素保存为该匿名范围内的el，当timeout 在5000 毫秒后触发时，该元素本身会被删除。

编辑：

我编辑了上面的函数，所以它不会破坏父元素（很抱歉）

【讨论】：

非常优雅的 IMO，而不是“怪异”
马特一个梦想，我同意 xyld 不是“奇怪”
谢谢，希望它对你有用。请确保您使用我的最新编辑.. 以前的 sn-ps 似乎正在杀死父元素！
@Vincent Robert：值得注意的一点。如有必要，请确保通过使用类来充分区分您想要消失的东西。
@Matt j 是什么？错字？

【解决方案2】：

演示： http://so.lucafilosofi.com/jquery-remove-append-after-5-seconds

通过增加或减少delay(#)来设置你的时间

$j('.done').delay(2000).fadeOut(200,function() {
    $(this).html('Your services have been updated').fadeIn(200);
});

【讨论】：

演示链接失效

【解决方案3】：

另一种解决方案:) 什么代码：

创建一个隐藏的元素
将其附加到具有“.add-comment”类的元素。
淡入新的跨度，

在 4.5 秒后新的 span 淡出并自行移除。

jQuery('<span />',{ style:'display:none' })
    .html('Mesaj trimis...')
    .appendTo(jQuery('.add-comment'))
    .fadeIn('slow', 
        function(){
            var el = jQuery(this);
            setTimeout(function(){
                el.fadeOut('slow',
                    function(){
                        jQuery(this).remove();
                    });
            }, 4500);
    });

【讨论】：

【解决方案4】：

我知道这有点晚了，但我想与您分享我的解决方案，因为我将它添加到我的全局功能中。

function alert(elem,content,type,posi){
    
    //elem - element to be inserted
    //content - content of the alert box (based from bootstrap)
    //type -  alert type
    //posi - either append or prepend    
    
    //primary, secondary, success, warning, info, danger, light, dark
    if(type == undefined)
       type = 'info';

    elem.find('.glb-alert').remove();
    var a = '<div class="alert alert-danger col-md-12 glb-alert" role="alert" >'+content+'</div>';
    
    if(posi == undefined|| posi == 'prepend')
       elem.prepend(a).find('.glb-alert').delay(1200).fadeOut();
    else if(posi == 'append')
       elem.append(a).find('.glb-alert').delay(1200).fadeOut();

}

【讨论】：

【解决方案5】：

我不确定这里的上下文，但它会起作用吗

<span id="special_message">Your services have been updated.</span>`

然后删除那个特定的 ID 标记？

【讨论】：

【解决方案6】：

您可能会考虑 Ben Alman 的 doTimeout 插件 - http://benalman.com/projects/jquery-dotimeout-plugin/

$j('<span>Your services have been updated</span>')
    .appendTo('.done')
    .doTimeout( 5000, 'remove' );

【讨论】：

如果可以使用 .delay(5000) 为什么还要使用插件
delay() 仅适用于放置在效果队列中的事件。

【解决方案7】：

// a little jQuery plugin...
(function($){ 
    $.fn.timeout = function(ms, callback)
    {
        var self = this;
        setTimeout(function(){ callback.call(self); }, ms);
        return this;
    }
})(jQuery);

// ...and how to use it.
$("<span>Your services have been updated</span>")
    .appendTo('.done')
    .timeout(5000, function(){ this.remove(); });

【讨论】：

【解决方案8】：

我喜欢这种在删除跨度之前使用短暂淡出的方法。它还会在附加之前删除以前的消息。

$("<span class='js_msg'>Your services have been updated</span>")
    .appendTo($j('.done').children("span.js_msg").remove().end())
    .each(function(){
        var self = $(this);
        setTimeout(function () {
            self.fadeOut(500,function(){
                self.remove();
            });
        }, 4500); 
   }
);

【讨论】：