CODEWITHSUNDEEP
jquery
Foysal Vai
Foysal Vai

Reputation: 1363

jQuery fadeOut method is not fading out element

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

Upvotes: 3

Views: 2542

Answers (5)

anina.achermann
anina.achermann

Reputation: 1

I am pretty sure that you don't need to use the remove() function as fadeOut also removes the element when it is finished fading.

Upvotes: 0

Gabriel
Gabriel

Reputation: 18780

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

Upvotes: 6

Netorica
Netorica

Reputation: 19327

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Use the callBack function, Normally CallBacks will be fired once after the execution of parental tasks.

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

Upvotes: 1

Related Questions