下载地址: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. 366. Fibonacci【Naive】

    Find the Nth number in Fibonacci sequence. A Fibonacci sequence is defined as follow: The first two ...

  2. 每日英语：Do Successful People Need Sleep?

    George Washington and his Revolutionary War victories. Robert Frost and the composition of 'Stopping ...

  3. 【转】如何把hadoop-1.x源码关联到Eclipse工程

    [转]http://www.tuicool.com/articles/mIb2EzU

  4. js to json字符串

    var last=obj.toJSONString(); //将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

  5. 在eclipse上Checkstyle的安装和使用

    1. 概述 随着中心的代码规范的建立和实施,项目组对代码规范要求,以及软件工程师们对自身代码的编写规范重要性的认知,“代码规范”已经成为了中心的一个“热词”.然后怎么才能写出有规范的代码,怎么才能养成 ...

  6. phoenix 入门

    http://phoenix.apache.org/Phoenix-in-15-minutes-or-less.html Blah, blah, blah - I just want to get s ...

  7. 串口编程-termios编程

    linux使用terminfo数据库来描述终端能力以及调用对应功能的方法.POSIX定义了完成终端I/O的标准方法:termios函数族 #include <termios.h>#incl ...

  8. python文件编码说明 coding=utf-8

    python 支持3种编码声明,一般常用能见到下面两种 1.# -*- coding: utf-8 -*- 这种写法是为了兼容Emacs的编码声明 2.短一点,但Emacs不能用# coding=ut ...

  9. js和jquery获取屏幕的高度

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  10. 那么类 Man 可以从类 Human 派生，类 Boy 可以从类 Man 派生

    若在逻辑上 B 是 A 的“一种”(a kind of ),则允许 B 继承 A 的功 能和属性. 例如男人(Man)是人(Human)的一种,男孩(Boy)是男人的一种. 那么类 Man 可以从类 ...