Consistent performance of functions

Question

After the animation I want to remove the block from the page. Those. first bring to opacity = 0, then make display = none

Code:

$("#go").click(function(){ $("#block").animate({ opacity: 0.0 }, 500 ); $("#block").hide(); });

immediately executes hide (), apparently in parallel. How to make perform sequentially?

Accepted Answer · 2012-07-24T10:16:55

 $("#go").click(function(){ $("#block").animate( { opacity: 0.0 }, 500, function(){ $("#block").hide(); } ); });

or:

 $("#go").click(function(){ $.when( $("#block").animate({ opacity: 0.0 }, 500) ).then(function(){ $("#block").hide(); }); });

by the way, .animate({ opacity: 0.0 }, 500) equivalent to .fadeOut(500)

.animate (properties [, duration] [, easing] [, complete] ): http://api.jquery.com/animate/
jQuery.when ()
Deferred object
.fadeOut

1 answer 1