jQuery Easing 动画效果扩展插件

jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。

引入Easing js文件

该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

使用jQuery Easing

jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展。

1.jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果,使用代码如下:
$(element).slideUp({
    duration: 1000, 
    easing: method, 
    complete: callback
});
参数duration:定义动画运动时间,毫秒,其实就是速度,时间越短,运动速度越快。
参数easing:指定动画效果,Easing js提供多种动画效果,有匀速运动、变加速运动、缓冲波动效果,它们是:linear,swing,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.各动画实际效果请参照演示demo。
参数complete:动画结束后回调函数callback,可以自定义动画结束后的调用函数。

2.使用jQuery自定义动画函数animate()

jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果,使用代码如下:
$(element).animate({
    height:500,
    width:600
    },{
    easing: 'easeInOutQuad',
    duration: 500,
    complete: callback
});
上面的代码定义了一个缓冲效果的动画,我们可以根据项目需要,结合jQuery Easing制作各种动画效果。

再来一个案例

html代码和样式

<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			body{
				margin: 50px;
			}
			a{
				text-decoration: none;
				color:#FF0000;
			}
			h3{
				cursor: pointer;
			}
			ul{
				width: 200px;
				display: none;
			}
			li{
				list-style: none;
			}
			span{
				cursor: pointer;
			}
			
			
		</style>

<h3>产品</h3>
		<ul>
			<li><a href="#">1111</a></li>
			<li><a href="#">1111</a></li>
			<li><a href="#">1111</a></li>
			<li><a href="#">1111</a></li>
		</ul>
		<h3>服务</h3>
		<ul>
			<li><a href="#">2222</a></li>
			<li><a href="#">2222</a></li>
			<li><a href="#">2222</a></li>
			<li><a href="#">2222</a></li>
		</ul>
		<h3>团队</h3>
		<ul>
			<li><a href="#">3333</a></li>
			<li><a href="#">3333</a></li>
			<li><a href="#">3333</a></li>
			<li><a href="#">3333</a></li>
		</ul>

jS文件

<script src="jquery-3.1.1.min.js"></script>
<script src="jquery.easing.1.3.js"></script>

<script type="text/javascript">
			$(function(){
				$.easing.def = 'easeOutElastic';
				var oBth = $('h3');
				var oContent = $('ul');
				
				oBth.click(function(){
					//如果直接放siblings()会把所有的兄弟元素都关闭,所以siblings里要放上ul,这样就是只将ul的兄弟元素隐藏
					$(this).next(oContent).slideToggle().siblings('ul').slideUp();
				});
			});
		</script>
在上面,我们用$.easing.def = 'easeOutElastic';这行引入了jquery easing 里面定义的一个样式,这个样式作用是下拉菜单动画效果震颤,只要注释掉这行,效果则变为普通效果。

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND