Animate the hiding and showing of two divs, delaying the first before showing it.

Edit code and click me	Your Result (Some examples do not work in Google Chrome):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> div { width: 60px; height: 60px; float: left; } .first { background-color: #3f3; } .second { background-color: #33f;} </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p><button>Run</button></p> <div class="first"></div> <div class="second"></div> <script type="text/javascript" language="javascript"> $("button").click(function() { $("div.first").slideUp(300).delay(800).fadeIn(400); $("div.second").slideUp(300).fadeIn(400); }); </script> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself