Resolve the returned Promise using a $.when() statement (the .promise() method makes it possible to do this with jQuery collections):

Edit code and click me	Your Result (Some examples do not work in Google Chrome):
<!DOCTYPE html> <html> <head> <style> div { height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>Go</button> <p>Ready...</p> <div></div> <div></div> <div></div> <div></div> <script> var effect = function() { return $("div").fadeIn(800).delay(1200).fadeOut(); }; $("button").bind( "click", function() { $("p").append( " Started... "); $.when( effect() ).done(function() { $("p").append(" Finished! "); }); }); </script> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself