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"})</

本文链接:https://my.lmcjl.com/post/12614.html

展开阅读全文

4 评论

留下您的评论.