$(document).ready(function () { $("#buttonHide").click(function () { $("#form").fadeOut("slow", function () { alert("FadeOut done !!!"); }); }); $("#buttonShow").click(function () { $("#form").fadeIn(1000, function () { animate(); }); }); }); function animate() { alert("FadeIn Done !!!"); }
<html> <head> <title>fade in jQuery</title> </head> <body> <fieldset id="form"> <legend>Form</legend> <table> <tr> <td><label>Name:</label></td> <td><input type="text" id="txtName"><td> </tr> <tr> <td><label>Age:</label></td> <td><input type="text" id="txtAge"><td> </tr> <tr> <td><label>Address:</label></td> <td><input type="text" id="txtAddress"><td> </tr> </table> </fieldset> <div id="buttonDiv"> <input type="button" id="buttonHide" value="Fade Out"/> <input type="button" id="buttonShow" value="Fade In"/> </div> </body> </html>
fieldset { width:300px; margin-left:100px; } #buttonDiv { margin-left:100px; }