jQuery fadeOut method is not fading out element

Question

I am facing a peculiar problem while I am using jQuery fadeOut method.

When I use below code it is fading out.

$('#id').fadeOut("slow" );

But when I use below code it is not fading out, it is just disappear from screen.

$('#id').fadeOut("slow" ).remove();

Could anyone say what is the problem ??

Is there any way to make fading out the second one??

Thanks

Answer 1

The problem is that fadeOut is an animation method, which means it will happen over time, but you are then immediately invoking remove. Instead you can use the callback signature of fadeOut:

$('#id').fadeOut('slow', function(){
  $(this).remove();
});

Answer 2

使用callBack function ，通常在执行parental任务后会触发一次CallBacks 。

$('#id').fadeOut("slow",function(){ $(this).remove() } );

Answer 3

You need to wait for the fadeOut() to complete before removing it from the dom using the complete callback.

$('#id').fadeOut("slow", function(){
   $(this).remove()
} );

Answer 4

its because of the .remove() method that runs concurrently with the animation which makes #id not yet completely faded out when remove() is executed.

You need to put the remove() on the fade-out callback

$('#id').fadeOut( function() { //the fadeout is finished call the callback function
   $(this).remove();
 });

Answer 5

我很确定你不需要使用remove()函数，因为fadeOut在完成淡入fadeOut也会删除元素。