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. CocoaPods安装教程

    Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage CocoaPods是什么? 当你开发iOS应 用时, ...

  2. yii和wp做博客

    第一步,安装yii和wp: 第二步,创建protected/components/ExceptionHandler.php文件 <?php class ExceptionHandler { pu ...

  3. 网站上点击自定义按钮发起QQ聊天的解决方案

    一.背景 最近由于开发需要,需要在网站上自定义一个立即交谈的按钮,现将解决方式分享给大家. 二.解决方案 1.首先访问:http://shang.qq.com/widget/consult.php,适 ...

  4. 线段树（main函数自由）

    都是一些裸线段树的模板,无主函数! #include<cstdio> #include<algorithm> #include<cstring> #include& ...

  5. 51nod1049(计算最大子段和)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1049 题意:又是仲文题诶- 思路:暴力会超时,又好像没什么专门 ...

  6. EmguCV学习 与opencv的区别和联系

    openCV是因特尔的一个开源的视觉库,里面几乎包含了所有的图像处理的经典算法,并且采用C和少量的C++编写,运行效率很高,对于做图像处理这方面工作的,认识opencv是必须的工作.不过opencv有 ...

  7. 《C#本质论》读书笔记（14）支持标准查询操作符的集合接口

      14.2.集合初始化器 使用集合初始化器,程序员可以采用和数组相似的方式,在集合的实例化期间用一套初始的成员来构造这个集合. 如果没有集合初始化器,就只有在集合实例化后才能显示添加到集合中--例如 ...

  8. Android之Picasso --zz

    简介: Picasso是Square公司开源的一个Android图形缓存库.可以实现图片下载和缓存功能. 特点: 1.加载载网络或本地图片并自动缓存处理: 2.链式调用: 3.图形转换操作,如变换大小 ...

  9. Linux Shell 高级编程技巧2----shell工具

    2.shell工具    2.1.日志文件        简介            创建日志文件是很重要的,记录了重要的信息.一旦出现错误,这些信息对于我们排错是非常有用的:监控的信息也可以记录到日 ...

  10. Linux环境下stl库使用(map)

    例子1: testMap.cpp #include <string.h> #include <iostream> #include <map> #include & ...