下载地址:http://www.jb51.net/jiaoben/32922.html

基本语法：easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。

环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它，如下：

1
2
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>

使用：

easing是基于animate这个函数,animate的语法:animate(params,speed,easing,fn);

params:一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式

speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing：过渡效果名称,默认jquery只提供"linear" 和 "swing",默认过渡效果是"swing"

fn:动画完成时执行的函数

如果在没引入easing的情况下如果想改变元素的left:

html:

1
<div style="width:100px; height:100px; position:absolute; left:20px;"></div>

jquery代码：

$(function (){

    $(document).click(function (){

        $("div").animate({left: "300px"}, 1000,"linear",function (){

            alert('a');

        });

    });

});

在引入easing之后animate语法：animate(params,easing)

params：一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式

easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

例子：同样改变left值

html:

<div style="width:100px; height:100px;  position:absolute; left:20px;"></div>

jquery:

$(function (){

    $(document).click(function (){

        $("div").animate({left: "300px"},{

            duration:1000,

            easing:"easeOutBounce",

            complete:function (){

                alert("动画完成");

            }

        });

    });

});

完整代码：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery-1.11.0.js"></script>

<script type="text/javascript" src="jquery.easing.min.js"></script>

<script type="text/javascript">

$(function (){

    $(document).click(function (){

        $("div").animate({left: "300px"},{

            duration:1000,

            easing:"easeOutBounce",

            complete:function (){

                alert("动画完成");

            }

        });

    });

});

</script>

</head>

<body>

<div style="width:100px; height:100px;  position:absolute; left:20px;"></div>

</body>

</html>

jquery.easing的使用的更多相关文章

  1. JQuery强化教程 —— jQuery Easing

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

  2. jquery.easing.js的使用

    jquery.easing.js是个好东西,各种动画效果扩展,加强和丰富了jquery自带的各种动画函数 box点击就会像移动出弹簧效果,$(obj).animate(目前状态,时间,效果,回调函数) ...

  3. jQuery Easing 使用方法及其图解

    jQuery Easing 使用方法及其图解,非常详尽:http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html

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

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

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

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

  6. jQuery Easing 动画效果扩展

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

  7. Jquery Easing函数库

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

  8. jquery.easing 和 jquery.transit 动画插件的使用

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

  9. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

随机推荐

  1. iPhone应用程序的启动过程

    Phone的入口函数main,这之后它有是怎样启动应用程序,初始化的呢,这些都是通过 UIApplicationMain 来实现的. 其启动的流程图大致如下图所示: 1 int retVal = UI ...

  2. Debian7/8安装最新的nginx稳定版本

    我们知道,通过 apt-get install nginx 就可以安装上nginx,可惜这样安装的nginx版本都有些旧,就连最新的Debian 8.0 默认安装的仍然是1.6.2,更别说 Debia ...

  3. linux 无外网情况下安装 mysql

    由于工作需要,需要在一台装有 CentOS 系统的测试服务器上安装 MySQL ,由于该服务器上存有其他比较重要的测试数据,所以不能连接外网.由于之前安装 MySQL 一直都是使用 yum 命令一键搞 ...

  4. 【Java】验证码识别解决方案

    对于类似以下简单的验证码的识别方案: 1. 2 3 4. 1.建库:切割验证码为单个字符,人工标记,比如:A. 2.识别:给一个验证码:切割为单个字符,在库中查询识别. /*** * author:c ...

  5. cocos2dx场景切换的坑

    有一个类可以使用不同的数据源,每个数据源对应一个对象. 我在类里保存了对象的实例,由于要在其它地方使用所以做成了静态,并在每次初始化时 重新设置,析构时删除. 现在我打开了A,切换到B,结果这个静态的 ...

  6. 应用DataAdapter对象填充DataSet数据集

    private void Form1_Load(object sender, EventArgs e) { string strCon = "Server=localhost;User Id ...

  7. Java的多线程 简单入门

    Java的多线程 简单入门 首先能够先搞清楚什么是程序.进程.线程,以及它们之间的关系: 定义: 一 程序仅仅是一组指令的有序集合.它是静态的 二 进程是具有一定独立功能的程序关于某个数据集合上的一次 ...

  8. elasticsearch -- 问题纪录

    报错1: [1]: max file descriptors [65535] for elasticsearch process is too low, increase to at least [6 ...

  9. CI 多表关联查询

    方法一:$this->db->query("sql  语句");     直接写sql语句 方法二: #多表关联查询 $data=$this->db->fr ...

  10. POJ 3168 Barn Expansion (几何+排序)

    题目链接:id=3168">POJ 3168 Barn Expansion 题意:抽象出来就是给出n个矩形的坐标是(左下角和右上角的坐标,矩形的边都是平行x,y轴),问有几个矩形和其它 ...