jquery.easing.js缓动函数插件的用法

最新推荐文章于 2024-03-15 09:33:58 发布

panlinglong

最新推荐文章于 2024-03-15 09:33:58 发布

阅读量2.6k

点赞数

分类专栏： javascript 文章标签： jquery.easing.js easing.js

本文链接：https://blog.csdn.net/Panlingfan/article/details/36008615

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。

jquery.easing.js 这个插件，增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。

官方也有案例：打开官方实例。

如何使用 jquery.easing.js

第一步引入插件

jQuery 插件嘛，当然要先引入 jQuery，然后再引入 jquery.easing.js 。

<span style="font-family:Arial;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span style="white-space:pre">	</span><html xmlns="http://www.w3.org/1999/xhtml">
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">	</span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="white-space:pre">	</span><title>无标题文档</title>
<span style="white-space:pre">	</span><script src="jquery 2.1.1.js" type="text/javascript"></script>
<span style="white-space:pre">	</span><script src="jquery.easing.1.3.mine.js" type="text/javascript"></script></span>

第二步启用插件

首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度，从原本的 300px 变成 600px。按照 animate 的写法，加上 easing 。

<span style="font-family:Arial;">$("#toggle2").click(function(e){
		$('#example2').animate(
			{height:200}, 
			{duration: 1000, easing: 'easeInOutCirc'}
		)
		.animate(
			{height:100}, 
			{duration: 1000, easing: 'easeOutBounce'}
		);</span>

这样，就对 toggle2对象，先启用了一个 easeInOutCirc 过渡效果，后启用了一个easeOutBounce的过渡效果，在 1000毫秒内先变成200px，再变成100px。

插件的所有函数曲线图和效果见：http://easings.net/zh-cn。

可以应用的动画方法

不仅仅支持 animate 方法，还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以，这个插件相当于扩充了官方的过渡效果样式。

插件的参数

这个插件有三个参数：duration、easing、complete。

duration 参数

用来指定动画变化的时间，以毫秒为单位。

easing 参数

指定这个动画要使用何种过渡样式。具体的过渡样式名和效果，需要在http://easings.net/zh-cn这里，选择找到自己想要的效果。

complete 参数

设置一个回调函数，当动画完成之后，执行这个函数。

其他注意事项

使用 slideUp 动画方法

slideUp 这类的动画方法，要比 animate 简单一些，不需要复杂的属性参数，所以可以直接这样写：

<span style="font-family:Arial;">$(element).slideUp(1000, method, callback});
        $(element).slideUp({ duration: 1000, easing: method, complete: callback});</span>

其他的 hide 、show 之类的方法，自行类比。

指定默认的 easing 样式

在使用中 easing 参数是可以省略的，省略之后，就会调用默认的过渡样式。可以使用下面一句代码，指定默认的动画过渡样式。

jQuery.easing.def = "过渡样式名，例如 easeInOutCirc";

用起来挺简单的，但是有了更和谐的变化效果，可以增强用户体验。

下面是一个完整的应用案例：

<span style="font-family:Arial;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span style="white-space:pre">	</span><html xmlns="http://www.w3.org/1999/xhtml">
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">	</span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<span style="white-space:pre">	</span><title>无标题文档</title>
<span style="white-space:pre">	</span><style>
<span style="white-space:pre">	</span>.big {
   <span style="white-space:pre">	</span> background: none repeat scroll 0 0 #EEEEEE;
   <span style="white-space:pre">	</span> height: 100px;
	<span style="white-space:pre">	</span>position:absolute;
	<span style="white-space:pre">	</span>left:0;
	<span style="white-space:pre">	</span>width:200px;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>.big2{
	<span style="white-space:pre">	</span>top:200px;
	}

<span style="white-space:pre">	</span>.big a {
   <span style="white-space:pre">		</span> display: block;
   <span style="white-space:pre">		</span> font-size: 2em;
   <span style="white-space:pre">		</span> padding: 5px 0 0 10px;
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span></style>
<span style="white-space:pre">	</span><script src="jquery 2.1.1.js" type="text/javascript"></script>
<span style="white-space:pre">	</span><script src="jquery.easing.1.3.mine.js" type="text/javascript"></script>
<span style="white-space:pre">	</span><script type="text/javascript">
<span style="white-space:pre">	</span>$(document).ready(function() {
	<span style="white-space:pre">	</span>jQuery.easing.def = 'easeOutBounce';
	<span style="white-space:pre">	</span>$('#example').animate({left:"200px"}, {duration: 1000, easing: 'easeInOutCirc'}).animate({left:"0px"}, {duration: 1000, easing: 'e<span style="white-space:pre">	</span>aseOutBounce'});
	<span style="white-space:pre">	</span>$("#toggle2").click(function(e){
		<span style="white-space:pre">	</span>$('#example2').animate(
			<span style="white-space:pre">	</span>{height:200}, 
			<span style="white-space:pre">	</span>{duration: 1000, easing: 'easeInOutCirc'}
		<span style="white-space:pre">	</span>)
		<span style="white-space:pre">	</span>.animate(
			<span style="white-space:pre">	</span>{height:100}, 
			<span style="white-space:pre">	</span>{duration: 1000, easing: 'easeOutBounce'}
		<span style="white-space:pre">	</span>);
	<span style="white-space:pre">	</span>});
<span style="white-space:pre">	</span>});
<span style="white-space:pre">	</span></script>
<span style="white-space:pre">	</span></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">	</span><p id="example" class="big"><a href="#example" id="toggle">onload</a></p>
<span style="white-space:pre">	</span><p id="example2" class="big big2"><a href="#example" id="toggle2">The Clicker</a></p>
<span style="white-space:pre">	</span></body>
<span style="white-space:pre">	</span></html></span><span style="font-family:Microsoft YaHei, Arial, sans-serif;">
</span>

panlinglong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery.easing.js缓动函数插件的用法

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。jquery.easing.js 这个插件，增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。
复制链接

扫一扫