Posted in Javascript onDecember 25, 2008
注意此代码需要用到jquery的js文件,才可以用所以大家可以先下载一个jquery文件,注意调用路径。
代码:
<!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> <title>jQuery动画基础</title> <script type="text/javascript" src="../js/jquery-1.2.6.js"></script> <style type="text/css"> .theImage{ position:relative; background:Green; width:100px; } </style> <script type="text/javascript"> $(function(){ $("#btnShow").click(function(){ //$("#block").show(1000);//没有参数则没有动画效果 //$("#block").fadeIn("slow");//根据透明度显示或隐藏 $("#block").slideDown();//拉下来。只改变高度 }); $("#btnHide").click(function(){ //$("#block").hide("normal");//slow,normal,fast //$("#block").fadeOut(5000); $("#block").slideUp(); }); //自定义动画 $("#btnImage").click(function(){ $("#imageDiv").animate( //I //移动到的位置,这里的位置是相对与原来的位置 //top即相对原来的位置向上移动多少距离,没搞明白,结果是向下移动了。 //{left:"400px",top:"100px"}, //3000 //II {left:"+=50",width:"300px",height:"200px"},//改变位置的同时改变宽度高度 3000 ); }); //同时执行两个动画,执行完一个,然后接着执行另一个。 $("#btnImage").click(function(){ $("#imageDiv").animate( {left:"100px",width:"30px",height:"20px"}, 3000, function(){alert('callback函数');}//动画结束后要执行的函数 ); }); }); </script> </head> <body> <div> <button id="btnShow"> Show</button> <button id="btnHide">Hide</button> <div id="block" style="background:#369; width:150px; height:100px; ">Hello!</div> <button id="btnImage">moveImage</button> <div id="imageDiv" class="theImage">image</div> <div>hi</div> </div> </body> </html>
jQuery 动画基础教程
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@