!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head titlejquery/title style type="text/css"!-- #spanel,#showHide,#fadeout { width:200px; height:100px; background-color:Aqua; position:relative; cursor:pointer; font-size:12px; } --/style script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/script script type="text/javascript"!-- $(function(){ //用toggle,hide(),show()实现显示与隐藏 $("#showHide").toggle(function(){ $(this).hide(600) },function() { $(this).show(600); } ); //使用fadeout,fadeIn改变透明度 $("#fadeout").toggle(function(){ $(this).fadeOut(); },function() { $(this).fadeIn(); } ); //使用animate实现简单的动画效果 $("#spanel").bind("click",function(){ $(this).animate({left:"300px",height:"100px"},3000); }); }); // --/script /head body div id="showHide"show移上去看看/div p/p div id="spanel" h5hello/h5 /div p/p div id="fadeout"fadeout淡出效果 淡出效果淡出效果淡出效果淡出效果淡出效果 淡出效果淡出效果淡出效果淡出效果 /div /body /html
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]