Question

只是一个简单的问题。

我有这个链：

$(this).fadeOut(800); //which works good.

然后尝试删除它：

$(this).fadeOut(800).remove(); //makes it remove instantly, without fadeOut effect.

任何帮助？

http://api.jquery.com/fadeOut/#fadeOut-duration-complete

Answer 1

您想尝试使用fadeOut的完整回调函数：

$(this).fadeOut(800, function(){
  $(this).remove(); //This will execute once the fadeOut is completed.
});

可能缓存$(this)：

 var $this = $(this);
   $this.fadeOut(800, function(){
      $this.remove(); //This will execute once the fadeOut is completed.
    });

语法：

.fadeOut（[duration] [，complete]）

在remove()之后调用fadeOut()作为链时，它将在开始动画后立即调用，并且不会等待动画完成;因此，您希望利用完整的回调来确保在动画完成后完成此操作。

只是使用promise()和done()

为其他选项扩展答案

 var $this = $(this);
 $this.fadeOut(800).css('background-color', 'blue')
                    .promise()
                      .done(function () {
                         $this.remove();
                      });

Demo

Answer 2

使用回调：

$(this).fadeOut(800, function(){
    $(this).remove();
});

问题是remove()函数不等待动画完成，只是删除元素;而使用回调仅在动画完成后调用remove()。

参考文献：

fadeOut()。
remove()。

Answer 3

在remove方法的回调中执行fadeOut方法

$(this).fadeOut(800,function(){
  $(this).remove();
});

Answer 4

请改用$(this).fadeOut(800, function() { $(this).remove(); });。通过将.remove()置于回调中，只有在动画完成后才会触发。

Answer 5

使用fadeOut回调函数

$(this).fadeOut(800,function(){
  $(this).remove();
})

将remove（）链接到fadeOut（）可以避免动画

5 个答案:

Demo