jquery.easing.js的使用
jquery.easing.js是个好东西，各种动画效果扩展，加强和丰富了jquery自带的各种动画函数
box点击就会像移动出弹簧效果，$(obj).animate(目前状态，时间，效果，回调函数)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
body {
position:relative;
width:100%;
height:100px;
}
#box {
position:absolute;
width:100px;
height:100px;
background-color:red;
top:0px;
left:0px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#box").click(function () {
$(this).stop(true, true).animate({
left:'400px'
},
2000, 'easeInOutElastic',
function () {
$(this).animate({
left: '0px'
}, 2000, 'easeInOutElastic');
});
});
});
</script>
</body>
</html>
还支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果函数
各种动画效果如下,自己去试
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
jquery.easing.js的使用的更多相关文章
- jQuery.rotate.js参数
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- jquery.scrollTo-min.js
jquery.scrollTo-min.js 用户返回顶部及动画到目的地,支持目标值.锚点. 用法: 1.引入jQuery 2.$.scrollTo( this.hash || targetValue ...
- jquery.BannerRotator.js
项目地址:https://github.com/snipertulip/BannerRotator 演示地址:http://snipertulip.github.io/BannerRotator/de ...
随机推荐
- 常用邮箱的服务器(SMTP/POP3)地址和端口总结
163.com: POP3服务器地址:pop.163.com(端口:110) SMTP服务器地址:smtp.163.com(端口:25) 126邮箱: POP3服务器地址:pop.126.com(端口 ...
- visio 到处流程图
文件 -> 另存为 (选 .jpg) 选自定义,然后 300 * 300 像素.
- cascade 介绍与用法 （ oracle）
级联删除,比如你删除某个表的时候后面加这个关键字,会在删除这个表的同时删除和该表有关系的其他对象 1.级联删除表中的信息,当表A中的字段引用了表B中的字段时,一旦删除B中该字段的信息,表A的信息也自动 ...
- ListView + PopupWindow实现滑动删除
原文:ListView滑动删除 ,仿腾讯QQ(鸿洋_) 文章实现的功能是:在ListView的Item上从右向左滑时,出现删除按钮,点击删除按钮把Item删除. 看过文章后,感觉没有必要把dispat ...
- Sencha Architect 安装与使用
http://www.sencha.com/products/touch/ Sencha SDK Tools Advanced JavaScript and CSS Project Build Too ...
- freemarker 实现对URL的安全编码
[#setting url_escaping_charset='utf-8'] ${yourstr?url}
- go sample - hello world
入门级别的hello world package mainimport "fmt"func main() { fmt.Println("blibliblbibl!&quo ...
- php几个常用的概率算法（抽奖、广告首选）
做网站类的有时会弄个活动什么的,来让用户参加,既吸引用户注册,又提高网站的用户活跃度.同时参加的用户会获得一定的奖品,有100%中奖的,也有按一定概率中奖的,大的比如中个ipad.iphone5,小的 ...
- hdu 4826(dp + 记忆化搜索)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4826 思路:dp[x][y][d]表示从方向到达点(x,y)所能得到的最大值,然后就是记忆化了. #i ...
- MATLAB中stem函数用法
stem(Y) 将数据序列Y从x轴到数据值按照茎状形式画出,以圆圈终止.如果Y是一个矩阵,则将其每一列按照分隔方式画出. stem(X,Y)在X的指定点处画出数据序列Y. stem(...,'fil ...