jQuery..
<!DOCTYPE html> <html> <head> <script src="jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but1").click(function(){ $("#p1").show(); });//显示隐藏的元素 $("#but2").click(function(){ $("#p2").hide(); });//隐藏元素 $("#but3").click(function(){ $("#p3").toggle(); });//自动切换显示或隐藏 $("#but4").click(function(){ $("#p1").slideDown("slow"); }); // 以slow的速度滑出#p1 $("#but5").click(function(){ $("#p2").slideUp("slow"); });//以slow的速度滑入#p2 //$("#but6").click(function(){ //$("#p3").slideToggle("slow"); //}); //以slow的速度滑出或滑入#p3 $("#but6").click(function(){ $('#p2').slideUp(300).delay(800).fadeIn(400); }); }); </script> </head> <style> </style> <body> <input id="but1" type="button" value="显示隐藏的元素"> <input id="but2" type="button" value="隐藏元素"> <input id="but3" type="button" value="自动切换显示或隐藏"> <input id="but4" type="button" value="滑出"> <input id="but5" type="button" value="滑入"> <input id="but6" type="button" value="自动滑出,滑入"> <p id="p1" style="display:none;">显示隐藏的元素</p> <p id="p2">隐藏元素</p> <p id="p3">自动切换显示或隐藏</p> </body> </html>