jquery.easing的使用
Posted 前端YYK
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery.easing的使用相关的知识，希望对你有一定的参考价值。
下载地址:http://www.jb51.net/jiaoben/32922.html
基本语法：easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}
介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。
环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它，如下：
|
1
2
|
<script type="text/javascript" src="jquery.easing.min.js"></script> |
使用：
easing是基于animate这个函数,animate的语法:animate(params,speed,easing,fn);
params:一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式
speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing：过渡效果名称,默认jquery只提供"linear" 和 "swing",默认过渡效果是"swing"
fn:动画完成时执行的函数
如果在没引入easing的情况下如果想改变元素的left:
html:
|
1
|
<div style="width:100px; height:100px; position:absolute; left:20px;"></div> |
jquery代码：
$(function (){
$(document).click(function (){
$("div").animate({left: "300px"}, 1000,"linear",function (){
alert(\'a\');
});
});
});
在引入easing之后animate语法：animate(params,easing)
params：一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式
easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}
例子：同样改变left值
html:
<div style="width:100px; height:100px; position:absolute; left:20px;"></div>
jquery:
$(function (){
$(document).click(function (){
$("div").animate({left: "300px"},{
duration:1000,
easing:"easeOutBounce",
complete:function (){
alert("动画完成");
}
});
});
});
完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function (){
$(document).click(function (){
$("div").animate({left: "300px"},{
duration:1000,
easing:"easeOutBounce",
complete:function (){
alert("动画完成");
}
});
});
});
</script>
</head>
<body>
<div style="width:100px; height:100px; position:absolute; left:20px;"></div>
</body>
</html>
以上是关于jquery.easing的使用的主要内容，如果未能解决你的问题，请参考以下文章