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. Linux内核补丁升级

    如果机器已经联网,直接利用包管理工具更新,需要注意的是现在3.0以上的内核引入了签名机制,需要导入签名的key,参考步骤如下: 1.导入keyrpm --import https://www.elre ...

  2. HTML简历表格

    效果图 <!DOCTYPE > <html> <head> <meta charset="utf-8" /> </head&g ...

  3. C#复制、粘贴文本信息到剪贴板

    复制:private void button1_Click(object sender, System.EventArgs e) { // Takes the selected text from a ...

  4. #import、#include、#import<>和#import””的区别

    一.#import与#include #import不会引起交叉编译的问题.因为在Objective-C中会存在C/C++和Object-C混编的问题,如果用#include引入头文件,会导致交叉编译 ...

  5. Elo rating system 模拟

    package org.cc.foo_008; import java.util.ArrayList; import java.util.List; import java.util.Random; ...

  6. lnmp初步学习知识整理

    Linux常用30个命令 1.帮助命令 1) man 就是manual的缩写,用来查看系统中自带的各种参考手册(一般linux系统中自带英文手册)! man 命令名 //查看该命令的介绍 2) 命令名 ...

  7. jquery学习笔记----jquery相关的文档

    http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...

  8. windows服务 - C# U盘升级

    1.左侧工具栏里有Timer控件,但是如果调用的是系统时间,就需要添加System.timer.timer空间下的控件.   2.服务编写之后,还不能由SCM(服务控制管理器)进行管理,需要给该服务添 ...

  9. C#的面向对象特性之多态

    using System; using System.Collections; using System.Collections.Generic; namespace codeTest { class ...

  10. App 开发：Hybrid 架构下的 HTML5 应用加速方案

    在移动 App 开发领域,主流的开发模式可分为 Native.Hybrid.WebApp 三种方式.然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立 ...