缓冲效果插件easing用法

2012-09-12 10:09 9474 次阅读分类: JS+jQuery, 前端相关已关闭评论

免打扰阅读

本站的导航条二级菜单展开缓冲效果就是使用插件easing实现的，类似弹簧的缓冲效果...

在实际应用中偶尔会使用到这个插件以实现缓冲效果，现在这里记录下插件easing的用法。此插件依赖jquery库，自身是一个js插件文件,引用代码如下：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

最常使用的插件属性为easeOutBounce，调用方法：

 easing:"easeOutBounce"

完整可运行的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>缓冲效果插件easing用法</title> <style type="text/css"> *{margin:0;padding:0;} body{padding:50px;} .clickBox{width:200px;height:45px;margin:0 auto; text-align:center;padding:10px;} .demo{width:200px; height:200px; border:1px red solid;margin:0 auto;} .demo p{width:200px; height:200px; background:#0f0; display:block;overflow:hidden; text-align:center;} </style> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function(){ $(".demo p").css({ //width:0, height:0 }) $("a").hover(function(){ $(".demo >p").animate({ //width:200, height:200 },{duration:1000,easing:"easeOutBounce"}) },function(){ $(".demo >p").animate({ //width:0, height:0 },{duration:1000,easing:"easeOutBounce",complete:done}) }); function done(){ console.log("easing函数执行完，此处为回调函数！"); } }) </script> <div class="clickBox"> <a href="javascript:;">测试：鼠标移出移入</a> </div> <div class="demo"> <p>缓冲效果</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

去掉3处的width注释，并注释掉3处高度height的定义，可查看横向的缓冲效果！