jQuery - 删除前的延迟和淡出

Question

我正在尝试.delay()和.fadeOut()然后.remove()

但delay和fadeout对remove

无效

这是我的代码：

jQuery("#container").delegate(".remove", "click", function (e) {
    e.preventDefault();
    var parent = jQuery(this).data('parent');
    jQuery(this).closest('.' + parent).fadeOut(1000).delay(1000).remove();
})

Answer 1

为什么不

jQuery(this).closest('.' + parent).fadeOut(1000, function(){
    $(this).remove()
});

在这种情况下，您应该使用.fadeOut()提供的完整回调

jQuery("#container").on("click", ".remove", function (e) {
    e.preventDefault();
    var $this = jQuery(this), parent = $this.data('parent');
    $this.closest('.' + parent).fadeOut(1000).delay(1000).remove();
})

Answer 2

.remove()不在查询中，也不是转换，因此.delay()无效。请改用setTimeout。

jQuery(this).closest('.' + parent).fadeOut(1000, function(){
   setTimeout($(this).remove(), 1000)
});

附注，使用.on()而不是.delegate()与更新版本的jQuery

Answer 3

您可以执行以下操作

jQuery("#container").delegate(".remove", "click", function (e) {
    e.preventDefault();
    var parent = jQuery(this).data('parent');
    //jQuery(this).closest('.' + parent).fadeOut(1000).delay(1000).remove();

    jQuery(this).closest('.' + parent).delay(1000).fadeOut(1000, function(){
      $(this).remove();
    });
})

请阅读以下链接，了解其他执行此操作的方法。

Why can't I delay a remove call with jQuery

建议

尝试使用.on()而不是.delegate()

Answer 4

我为我的项目创建了简单的函数。我使用Bootstrap警报，但最后一行回答了你的问题： $（＆＃39;＃一些标签＆＃39）。淡入（）延迟（3000）.fadeOut（＆＃39;慢＆＃39;，的功能（）{$（本）卸下摆臂（） ;} ）;

 function alertFade(type,message){
    //alerts: info, warning, success, danger
    var $div = $('<div id="addSuccess" class="alert alert-'+type+'">'+message+'</div>');
    $('#alerts').append($('<div id="addSuccess" class="alert alert-'+type+'">'+message+'</div>'));
    $('#alerts').children().fadeIn().delay(3000).fadeOut('slow',function(){$(this).remove();});
}