Animates all span and input elements to show normally. Once the animation is done, it changes the text.

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> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ function doIt() { $("span,div").show("normal"); } $("button").click(doIt); // can pass in function name $("form").submit(function () { if ($("input").val() == "yes") { $("p").show(4000, function () { $(this).text("Ok, DONE! (now showing)"); }); } $("span,div").hide("normal"); return false; // to stop the submit }); }); </script> <style> span { display:none; } div { display:none; } p { font-weight:bold; background-color:#fcd; } </style> </head> <body> <button>Do it!</button> <span>Are you sure? (type 'yes' if you are) </span> <div> <form> <input type="text" value="as;ldkfjalsdf"/> </form> </div> <p style="display:none;">I'm hidden...</p> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself