首页 > 代码库 > jquery.easing.js的使用
jquery.easing.js的使用
jquery.easing.js是个好东西，各种动画效果扩展，加强和丰富了jquery自带的各种动画函数
box点击就会像移动出弹簧效果，$(obj).animate(目的状态，时间，回调函数)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> body { position:relative; width:100%; height:100px; } #box { position:absolute; width:100px; height:100px; background-color:red; top:0px; left:0px; cursor:pointer; } </style></head><body> <div class="box" id="box"></div> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#box").click(function () { $(this).stop(true, true).animate({ left:‘400px‘ }, 2000, ‘easeInOutElastic‘, function () { $(this).animate({ left: ‘0px‘ }, 2000, ‘easeInOutElastic‘); }); }); }); </script></body></html>
还支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果函数
各种动画效果如下,自己去试
jswing
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInElastic easeOutElastic easeInOutElastic
easeInBack easeOutBack easeInOutBack
easeInBounce easeOutBounce easeInOutBounce
jquery.easing.js的使用