Easing插件大家也许一直在用,非常的不错,能实现很多你想要的效果,并且jquery的很多内置方法也开始支持Easing参数了,经常使用jquery的朋友一定会知道,这里不再多讲,今天主要谈的是Easing的实用方法,至于动画方面在WEB开发笔记中的有一篇文章中已经提到过,大家可以结合着使用一下。
如果使用Easing 分以下几步走:
第一步:
去http://gsgd.co.uk/sandbox/jquery/easing/下载最新版的Easing 插件。
第二步:
页面加载Jquery与easing
<script src=”js/jquery-1.8.0.min.js”></script>
<script src=”js/jquery.easing.1.3.js”></script>
第三步:
我经常使用的方法有两种大类,一类是用toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果来实现,演示代码如下:
1 2 3 | $("#t1").slideUp({ duration: 1000, easing: "easeOutBounce"}); |
另一种方法就是配合animate,演示代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*$("#t1").hover(function(){ $(this).stop().animate( {"height":"400px"}, {queue:false,duration:600,easing:"easeOutBounce"} ); })*/ //或者如下代码:转载请注明www.chhua.com $("#t1").hover(function(){ $(this).stop().animate( {"left":"400px", "top":"200px", "height":"400px"}, "easeOutBounce" ); }) |
附Easing 效果演示地址:http://james.padolsey.com/demos/jquery/easing/
自由转载,转载请注明: 转载自WEB开发笔记 www.chhua.com
本文链接地址: JQuery的Easing插件配合animate实现动画方法 http://www.chhua.com/web-note3792
评论