<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示：jQuery Easing 动画效果扩展</title> <meta name="keywords" content="jquery.easing.js,动画效果, jquery插件" /> <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <style type="text/css"> .demo{width:860px; margin:20px auto} #alist{margin:10px} #alist li{float:left; height:24px; line-height:24px; padding:2px 10px; margin:4px; border:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer} #alist li:hover{background:#fefefe} #alist li:visited{color:#999} #show{width:760px; height:50px; background:#f7f7f7; border:1px solid #d3d3d3; margin:10px auto; clear:both} </style> <script type="text/javascript" src="http://mall.wiwide.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript"> $(function(){ $("#alist li").click(function(){ $(this).css({"color":"#999","background-color":"#fdfdfd"}); var action = $(this).attr('rel'); $('#show').height(50).animate({ height:500},{ easing: action, duration: 500, complete:function(){ } }); }); }); </script> </head> <body> <div id="header"> <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div> </div> <div id="main"> <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-212.html">jQuery Easing 动画效果扩展</a></h2> <div class="demo"> <ul id="alist"> <li rel="linear">linear</li> <li rel="swing">swing</li> <li rel="jswing">jswing</li> <li rel="easeInQuad">easeInQuad</li> <li rel="easeOutQuad">easeOutQuad</li> <li rel="easeInOutQuad">easeInOutQuad</li> <li rel="easeInCubic">easeInCubic</li> <li rel="easeOutCubic">easeOutCubic</li> <li rel="easeInOutCubic">easeInOutCubic</li> <li rel="easeInQuart">easeInQuart</li> <li rel="easeOutQuart">easeOutQuart</li> <li rel="easeInOutQuart">easeInOutQuart</li> <li rel="easeInQuint">easeInQuint</li> <li rel="easeOutQuint">easeOutQuint</li> <li rel="easeInOutQuint">easeInOutQuint</li> <li rel="easeInSine">easeInSine</li> <li rel="easeOutSine">easeOutSine</li> <li rel="easeInOutSine">easeInOutSine</li> <li rel="easeInExpo">easeInExpo</li> <li rel="easeOutExpo">easeOutExpo</li> <li rel="easeInOutExpo">easeInOutExpo</li> <li rel="easeInCirc">easeInCirc</li> <li rel="easeInOutCirc">easeInOutCirc</li> <li rel="easeInElastic">easeInElastic</li> <li rel="easeOutElastic">easeOutElastic</li> <li rel="easeInOutElastic">easeInOutElastic</li> <li rel="easeInBack">easeInBack</li> <li rel="easeInOutBack">easeInOutBack</li> <li rel="easeInBounce">easeInBounce</li> <li rel="easeOutBounce">easeOutBounce</li> <li rel="easeInOutBounce">easeInOutBounce</li> </ul> <div id="show">---目标元素高度变化---</div> <br/> </div> </div> <div id="footer"> <p>Powered by helloweba.com 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p> </div> </body> </html>
easing.rar下载地址
