javascript - How to remove an element slowly with jQuery?

ID : 20068

viewed : 15

Tags : javascriptjqueryjavascript

Top 5 Answer for javascript - How to remove an element slowly with jQuery?

vote vote

91

$target.hide('slow'); 

or

$target.hide('slow', function(){ $target.remove(); }); 

to run the animation, then remove it from DOM

vote vote

81

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

or

$('#target_id').fadeOut(300, function(){ $(this).remove();}); 

Duplicate: How to "fadeOut" & "remove" a div in jQuery?

vote vote

76

If you need to hide and then remove the element use the remove method inside the callback function of hide method.

This should work

$target.hide("slow", function(){ $(this).remove(); }) 
vote vote

62

$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();}); 
vote vote

56

All the answers are good, but I found they all lacked that professional "polish".

I came up with this, fading out, sliding up, then removing:

$target.fadeTo(1000, 0.01, function(){      $(this).slideUp(150, function() {         $(this).remove();      });  }); 

Top 3 video Explaining javascript - How to remove an element slowly with jQuery?

Related QUESTION?