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 ...
随机推荐
- java课后作业5
[问题]随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 1.申请一个长度为10的数组 2.计算机随机生成10个数,并赋给数组 3. ...
- 无法定位序数4369于动态链接库libeay32.dll
c:\windows\system32目录下应该有libeay32.dll,可能它过于陈旧,需要换一个新版本的libeay32.dll
- -bash: pod: command not found
OS X 系统没升级之前用的 cocoapods 一点儿问题都没有,但是升级成版本10.11.4 OS X EI Capitan之后,在终端除了cd 指令可以用之外,其他任何指令输入都是提示-bash ...
- ubuntu下deb包的安装方法
ubuntu下deb包的安装方法 简介 deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb dpkg 是Debian P ...
- 矿场搭建（codevs 1996）
题目描述 Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使 ...
- REORG TABLESPACE on z/os
这个困扰了我两天的问题终于解决了,在运行这个job时:总是提示 A REQUIRED DD CARD OR TEMPLATE IS MISSING NAME=SYSDISC A REQUIRED DD ...
- 四、优化及调试--网站优化--Yahoo军规下
21.根据域名划分页面内容 很显然, 是最大限度地实现平行下载 22.尽量减少iframe的个数 考虑即使内容为空,加载也需要时间,会阻止页面加载,没有语意,注意iframe相对于其他DOM元素高出1 ...
- ViewPager部分源码分析三：scroll
手指在屏幕上滑动,触发到onTouchEvent(),执行case MotionEvent.ACTION_MOVE: ... public boolean onTouchEvent(MotionEve ...
- html+css学习笔记：实用LessColor函数搭建配色方案
http://www.zcool.com.cn/article/ZMTUyNDc2.html 前言:用LESS CSS框架进行编码会简化代码结构,提高我们的工作效率,但是试验后你会发现,默认情况下,L ...
- scrollTop和scrollLeft的兼容解决万全方法
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...