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 ...
随机推荐
- August 30th 2016 Week 36th Tuesday
If you keep on believing, the dreams that you wish will come true. 如果你坚定信念,就能梦想成真. I always believe ...
- linux初体验
linux系统和window一样,也是一套独立的操作系统,它只是没有图形化界面而已
- 分布式缓存系统Memcached简介与实践
缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 设计模式学习之备忘录模式（Memento，行为型模式）（19）
假如我们已经记录一个人的个人信息,但是发现信息写错了,然后我先备份下再去修改,结果发现原来的信息是正确的,于是我就看备份的个人信息还原到初始的状态,下面我们用代码去实现 class Program { ...
- 禁用编译器自动生成的函数（Effective C++之06）
如果想让你的类定义出来的对象是独一无二的,即对象无法被复制,或者使用赋值操作符赋给另外一个对象,那么最好的方法就是禁用拷贝构造函数和赋值操作符.下面介绍几种禁用的方法.(方法来自Effective C ...
- python最简单的http服务器
人生苦短,我用python 今天有个需求就是简单的把自己的图片通过web共享,自然就想起了使用服务器了,在python下使用一个简单的服务器是非常方便的,用到标准库里面的SimpleHTTPServe ...
- CoreLocation 下的定位跟踪测速
#import "ViewController.h" #import <CoreLocation/CoreLocation.h> @interface ViewCont ...
- 【java基础】面向过程~面向对象
相信大家都知道这两个东西,可是大家是如何知道的呢?我们又该如何区分这个东西到底是面向过程还是面向对象的呢? 那,我们首先就要知道什么是面向过程,什么是面向对象: 面向过程"(Procedur ...
- How to AC it
旋转卡壳 DP,网络流