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. top

    . h或者? 显示帮助画面,给出一些简短的命令总结说明. k 终止一个进程.系统将提示用户输入需要终止的进程PID,以及需要发送给该进程什么样的信号.一般的终止进程可以使用15信号:如果不能正常结束那 ...

  2. 最长公共上升子序列（codevs 2185）

    题目描述 Description 熊大妈的奶牛在小沐沐的熏陶下开始研究信息题目.小沐沐先让奶牛研究了最长上升子序列,再让他们研究了最长公共子序列,现在又让他们要研究最长公共上升子序列了. 小沐沐说,对 ...

  3. merge

    当两个DataFrame相加的时候,如果,其中一个不全则会相加产生NA,所以必须一次性将数据的索引索引确定下来,然后对所有数据重建索引然后,填充0,再相加.否则有数据的和没数据的相加结果都变为了NA, ...

  4. Swift - 推送之本地推送(UILocalNotification)添加Button的点击事件

    上一篇讲到的本地推送是普通的消息推送,本篇要讲一下带按钮动作的推送消息 import UIKit @UIApplicationMain class AppDelegate: UIResponder, ...

  5. 1.Windows安装PostgreSQL

    按照下面的步骤,Windows机器上安装PostgreSQL.请确保已开启第三方防病毒,同时安装. 挑选你想要的PostgreSQL的版本号,可以点击以下链接下载 EnterpriseDB Windo ...

  6. case/casez/casex 的区分与使用

    参考:http://www.cnblogs.com/poiu-elab/archive/2012/11/02/2751323.html 与  verilog数字系统设计基础 一般来说,使用最多的是CA ...

  7. linux文件描述符open file descriptors与open files的区别

    一个文件被打开,也可能没有文件描述符,比如current working diretories,memory mapped files and executable text files ;losf可 ...

  8. Clr Via C#读书笔记---垃圾回收机制

    #1 垃圾回收平台的基本工作原理: 访问一个资源所需的具体步骤: 1)调用IL指令newobj,为代表资源的类型分配内存.在C#中使用new操作符,编译器就会自动生成该指令.2)初始化内存,设置资源的 ...

  9. C# 设计模式 提高可维护性的几点原则

    为了提高软件的可维护性,应该遵循以下几点原则: 1.“开放--封闭”原则(OCP) 一个软件实体应该对扩展开放,对修改封闭. 2.里氏代换原则(LSP) 子类型必须能替换她们的基类型,反过来则不成立. ...

  10. android 入门-android Studio 配置

    重要:sdk 最好先有一个版本 19版本.build-tools 19.1.0 extras 19.0和platforms android-19 1.下载android sdk 和jdk 并配置环境变 ...