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的使用的更多相关文章

  1. jQuery.rotate.js参数

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  2. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  3. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  4. JQuery强化教程 —— jQuery Easing

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  5. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  6. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

  7. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  8. jquery.scrollTo-min.js

    jquery.scrollTo-min.js 用户返回顶部及动画到目的地,支持目标值.锚点. 用法: 1.引入jQuery 2.$.scrollTo( this.hash || targetValue ...

  9. jquery.BannerRotator.js

    项目地址:https://github.com/snipertulip/BannerRotator 演示地址:http://snipertulip.github.io/BannerRotator/de ...

随机推荐

  1. October 7th 2016 Week 41st Friday

    The land didn't move, but moved; the sea was not still, yet was still. 大地止而亦行,大海动而亦静. Remember that ...

  2. loadrunner备忘

    1.超时设置 2. 可能是操作系统的环境不适合或者浏览器的版本有出入,具体的loadrunner版本支持的IE版本版本如下所示,请仔细核对是否正确.LR版本和IE版本兼容性问题,这个问题是我们安装环境 ...

  3. chaper3_exerise_UVa455_周期串

    #include<iostream> #include<cstring> #include<stdio.h> using namespace std; ; int ...

  4. 高效使用你的Xcode

    (via:VongLo's Dev Space  原文:Supercharging Your Xcode Efficiency)   好莱坞电影里经常看到黑客们手指在键盘上飞速跳跃,同时终端上的代码也 ...

  5. NYOJ之水仙花数

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsAAAAInCAIAAAAZDHiCAAAgAElEQVR4nO3dPVLjzNoG4G8T5CyEFC

  6. python获取指定星期的日期

  7. Cocoapods 更新后 使用

    platform:ios,'8.0'target 'APPNAME' do pod 'SMSSDK' pod 'MBProgressHUD', '0.9.1' pod 'AFNetworking', ...

  8. mysql 5.6.33 重置密码后报错

    [root@ Desktop]# mysql -uroot -p Enter password: Welcome to the MySQL monitor. Commands end with ; o ...

  9. 数据结构和算法 – 4.字符串、 String 类和 StringBuilder 类

    4.1.String类的应用 class String类应用 { static void Main(string[] args) { string astring = "Now is The ...

  10. 与你相遇好幸运，async解决循环回调问题

    由于使用的sailsjs框架,用的是sailsjs自身带的ORm(就是waterline),ORM的默认数据库的返回值在回调里面. > arg是一个数组 count用来计数用 tmpArr临时存 ...