<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>show()、hide()方法</title> <mce:style type="text/css"><!-- body{ background:url(bg1.jpg); } img{ border:1px solid #FFFFFF; } input{ border:1px solid #FFFFFF; font-size:13px; padding:4px; font-family:Arial, Helvetica, sans-serif; background-color:#000000; color:#FFFFFF; } --></mce:style><style type="text/css" mce_bogus="1">body{ background:url(bg1.jpg); } img{ border:1px solid #FFFFFF; } input{ border:1px solid #FFFFFF; font-size:13px; padding:4px; font-family:Arial, Helvetica, sans-serif; background-color:#000000; color:#FFFFFF; }</style> <mce:script language="javascript" src="jquery.min.js" mce_src="jquery.min.js"></mce:script> <mce:script language="javascript"><!-- $(function(){ $("input:first").click(function(){ $("img").hide(3000); //逐渐隐藏 }); $("input:last").click(function(){ $("img").show(1000); //逐渐显示 }); }); // --></mce:script> </head> <body> <input type="button" value="Hide"> <input type="button" value="Show"> <p><img src="01.jpg" mce_src="01.jpg"></p> </body> </html> 参考图书:精通JavaScript jquery