Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.

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 type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").click(function () { $(this).css({ borderStyle:"inset", cursor:"wait" }); $("input").slideDown(1000,function(){ $(this).css("border", "2px red inset") .filter(".middle") .css("background", "yellow") .focus(); $("div").css("visibility", "hidden"); }); }); }); </script> <style> div { background:#cfd; margin:3px; width:50px; text-align:center; float:left; cursor:pointer; border:2px outset black; font-weight:bolder; } input { display:none; width:120px; float:left; margin:10px; } </style> </head> <body> <div>Push!</div> <input type="text" /> <input type="text" class="middle" /> <input type="text" /> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself