css easeoutbounce,缓冲效果插件easing用法

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

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

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

easing:"easeOutBounce"

完整可运行的代码如下：

缓冲效果插件easing用法

*{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;}

$(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函数执行完，此处为回调函数！");

}

})

测试：鼠标移出移入

缓冲效果

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

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