此文不好,参考:
http://blog.csdn.net/greatverve/archive/2008/12/24/3596653.aspx
论坛讨论地址:
http://topic.csdn.net/u/20081222/17/2e156624-d15e-4bc4-9c81-2b062ff57b85.html
练习代码:
- <!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>自定义动画</title>
- <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
- <style type="text/css">
- .dis{display:none;}
- .show{display:block;}
- </style>
- <script type="text/javascript">
- // 在一个动画中同时应用三种类型的效果
- $(function (){
- $("#go").click(function(){
- $("#block").animate({
- width: "150px",//用百分比,表示相对窗口的宽度。
- height: "100px", //可以用数字代替
- fontSize: "2em", //div里文字字体大小
- borderWidth: 10
- }, 1000 );
- });
- //此法不通
- // $("#go").click(function(){
- // $("#block").animate({"bottom":"+50"},600);
- // });
- $("#back").click(function(){
- $("#block").css({display:'none'});
- });
- //加上这个,消失后又显现。
- // $("#back").click(function(){
- // $("#block").animate({
- // width: "0px",//设为0即消失
- // height: "0px",
- // fontSize: "2em",
- // borderWidth: 10
- // }, 1000 );
- // });
- });
- </script>
- </head>
- <body>
- <div>
- <button id="go"> Run</button>
- <button id="back">goback</button>
- <div id="block" style="background:#369; width:0px; height:0px; ">Hello!</div>
- <div>hi</div>
- </div>
- </body>
- </html>