Animating and deleting div-jquery

Question

I remove the div from the body with a fadeout effect with a delay.

$('#mydata div').each(function(i) { $(this).delay(200*i).fadeOut(1000); $(this).animate({ "opacity" : "0", }); }); $('#mydata').remove(); 

But if I use $ ('# mydata'). remove () animation doesn't work with any solutions.?

Answer 1

Something like that:

 $('#mydata div').each(function(i) { $(this).delay(200*i).fadeOut(1000); $(this).animate({ "opacity" : "0", },{ "complete" : function() { $('#mydata').remove(); } }); }); 

Answer 2

You need to do the deletion AFTER the animation is complete. This can be added to the animate() call as a full parameter (a function that will be called when the animation finishes):

  $(this).animate({ "opacity" : "0", //property 1000, //duration of animation (optional) function(){$('#mydata').remove();} //function to run on complete (optional) }); 

Learn more in the jQuery API.

Answer 3

If you don't mind having a div in the DOM, you can hide it , which is simpler:

 $('#mydata').hide(); 

and you can also specify the speed and type of animation

Answer 4

You delete the parent before the children disappear.

Try the following:

 $('#mydata div').each(function(i) { $(this).delay(200*i) .fadeOut(1000) .animate({ "opacity" : "0", }, function() { $(this).remove(); if($("#mydata div").length == 0) { $("#mydata").remove(); } }); }); 

Answer 5

A minor mod on Bens answers for me.

 $( "#book" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { // Animation complete. });