jquery - 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();
    });
})

阅读以下链接以了解其他方法。

为什么我不能使用 jQuery 延迟删除调用

建议

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

Answer 4

我为我的项目创建了简单的函数。我使用引导警报，但最后一行回答了你的问题： $('#some-tag').fadeIn().delay(3000).fadeOut('slow', function(){$(this).remove() ;} );

 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();});
}