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-1.11.0.js"></script><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的使用的更多相关文章
- JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery.easing.js的使用
jquery.easing.js是个好东西,各种动画效果扩展,加强和丰富了jquery自带的各种动画函数 box点击就会像移动出弹簧效果,$(obj).animate(目前状态,时间,效果,回调函数) ...
- jQuery Easing 使用方法及其图解
jQuery Easing 使用方法及其图解,非常详尽:http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- Jquery Easing函数库
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery.easing 和 jquery.transit 动画插件的使用
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
随机推荐
- wget镜像网站并且下载到指定目录 2012-06-20 19:40:56
wget镜像网站并且下载到指定目录 2012-06-20 19:40:56 分类: Python/Ruby wget -r -p -np -k -P /tmp/ap http://www.exampl ...
- AngularJS 和 Electron 构建桌面应用
译]使用 AngularJS 和 Electron 构建桌面应用 原文: Creating Desktop Applications With AngularJS and GitHub Electro ...
- forward declaration of class 错误
在使用Qt的时候遇到这个错误,查了一下发现,是因为我没有正确的使用前置声明. #ifndef FIRSTPAGE_H #define FIRSTPAGE_H #include "ui_dia ...
- What is purpose of @ConditionalOnProperty annotation?
http://stackoverflow.com/questions/26394778/what-is-purpose-of-conditionalonproperty-annotation **** ...
- QT 中设置按钮图片和文字的两种方法
1.使用QpushButton自带的API实现: void setIcon(const QIcon &icon) void setText(const QString &text) 该 ...
- 微信小程序 - Util工具类
/utils/utils.js 已经扩展到App对象中,Page方法中直接使用 app.util.method(...) 调用. 1. 扩展String.replaceAll JS默认值提供re ...
- 核函数(kernel function)
百度百科的解释: 常用核函数: 1.线性核(Linear Kernel): 2.多项式核(Polynomial Kernel): 3.径向基核函数(Radial Basis Function),也叫高 ...
- Android开发人员必备的10个开发工具
工欲善其事,必先利其器,Android SDK 本身包含很多帮助开发人员设计.开发.测试和发布 Android 应用的工具,在本文中,我们将讨论 10 个最常用的工具. 1.Eclipse ADT E ...
- 测试RESTful API利器-Postman
对于前端开发者而言,最需要的往往不是技术本身,其实技术都没什么难的,而最缺少的则是各种各样好的兵器,比如调试,开发工具等等. 我们这里就推荐一款前端开发的利器-Postman,它是Google Chr ...
- 经典SQL基础回顾
孔子有云:温故而知新,可以为师矣.既然孔老圣人都云了,咱今天就一起来重温一下MS SQL吧.开篇声明一下:大部分都是基础内容,SQL非常熟练的就别浪费您的时间了,因为这年头,大家时间都挺宝贵的.但是如 ...