首页 > 代码库 > jquery.easing的使用
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="http://www.mamicode.com/jquery-1.11.0.js"></ script > < script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/jquery-1.11.0.js"></script> <script type="text/javascript" src="http://www.mamicode.com/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的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。