将remove()链接到fadeOut()可以避免动画

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()as作为链,fadeOut()但不会等待动画完成; 因此,您希望利用完整的回调来确保在动画完成后完成此操作.

只是使用promise()和另一个选项来扩展答案done()

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

演示