jQuery自定义动画

此文不好,参考:

http://blog.csdn.net/greatverve/archive/2008/12/24/3596653.aspx 

论坛讨论地址:

http://topic.csdn.net/u/20081222/17/2e156624-d15e-4bc4-9c81-2b062ff57b85.html

练习代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>自定义动画</title>
  5.     <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
  6.     <style type="text/css">
  7.         .dis{display:none;}
  8.         .show{display:block;}
  9.     </style>
  10.     <script type="text/javascript">
  11.     // 在一个动画中同时应用三种类型的效果
  12.     $(function (){
  13.         $("#go").click(function(){
  14.           $("#block").animate({ 
  15.             width: "150px",//用百分比,表示相对窗口的宽度。
  16.             height: "100px", //可以用数字代替
  17.             fontSize: "2em", //div里文字字体大小
  18.             borderWidth: 10
  19.           }, 1000 );
  20.         }); 
  21.         //此法不通
  22. //        $("#go").click(function(){
  23. //            $("#block").animate({"bottom":"+50"},600); 
  24. //        });
  25.         $("#back").click(function(){
  26.             $("#block").css({display:'none'});
  27.         });
  28.         //加上这个,消失后又显现。
  29. //        $("#back").click(function(){
  30. //          $("#block").animate({ 
  31. //            width: "0px",//设为0即消失
  32. //            height: "0px", 
  33. //            fontSize: "2em", 
  34. //            borderWidth: 10
  35. //          }, 1000 );
  36. //        }); 
  37.     });
  38.     </script>    
  39. </head>
  40. <body>
  41. <div>
  42.     <button id="go"> Run</button>
  43.     <button id="back">goback</button>
  44.     <div id="block" style="background:#369; width:0px; height:0px; ">Hello!</div> 
  45.     <div>hi</div>
  46. </div>
  47. </body>
  48. </html>
end
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值