jQuery中Animate进阶用法(一)

jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~

首先要了解jQuery API中animate的详细用法。

animate( properties [, duration ] [, easing ] [, complete ] )

返回jQuery对象

描述: 根据一组 CSS 属性,执行自定义动画。

1、animate( properties [, duration ] [, easing ] [, complete ] )

1、properties
类型: PlainObject
一个CSS属性和值的对象,动画将根据这组对象移动。
2、duration (默认: 400)
类型: Number or String
一个字符串或者数字决定动画将运行多久。(默认值: "normal", 字符串"slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
3、easing (默认: swing)
类型: String
一个字符串,表示过渡使用哪种缓动函数。(jQuery自身提供"linear" 和 "swing")
4、complete
类型: Function()
在动画完成时执行的函数。

2、animate( properties, options )

1、properties
类型: PlainObject
一个CSS属性和值的对象,动画将根据这组对象移动。
2、options
类型: PlainObject
一组包含动画选项的值的集合。 支持的选项:

1、duration (default: 400)
Type: Number or String
一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )
2、easing (default: swing)
Type: String
一个字符串,表示过渡使用哪种缓动函数。(愚人码头注:jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件)
3、queue (default: true)
Type: Boolean or String
一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。 从jQuery1.7开始,队列选项也可以接受一个字符串,在这种情况下,在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用,动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
4、specialEasing
Type: PlainObject
由此方法的第一个参数properties定义的一个或多个CSS属性,及其相应的缓动函数组成的键值对map。( 1.4 新增)
5、step
Type: Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
6、progress
Type: Function( Promise animation, Number progress, Number remainingMs )
每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。(version added: 1.8)
7、complete
Type: Function()
在动画完成时执行的函数。
8、done
Type: Function( Promise animation, Boolean jumpedToEnd )
在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
9、fail
Type: Function( Promise animation, Boolean jumpedToEnd )
动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
10、always
Type: Function( Promise animation, Boolean jumpedToEnd )
在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。(version added: 1.8)

一些基本的应用你可以参照jQuery API,或者参照 jQuery API 中文

橙色部分是我想要重点讲解的!

 PlainObject

PlainObject类型,是Javascript对象包含0个或者跟多键值对。换句话说,PlainObject也是Object对象。但在jQuery文档中,被设计是为了区分其他多种Javascript对象。如null,用户自定义的数组,或者是主机对象向如document,typeof 值都是 “object”。通过jQuery.isPlainObject()方法来判断传入的的参数是否是PlainObject.

var a = [];
var d = document;
var o = {};
 
typeof a; // object
typeof d; // object
typeof o; // object
 
jQuery.isPlainObject( a ); // false
jQuery.isPlainObject( d ); // false
jQuery.isPlainObject( o ); // true

queue

一个布尔值,指示是否将动画放置在效果队列中。如果为false时,将立即开始动画。

它是来决定不同动画进行的顺序。

$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
 $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );

#block1要执行的动画中,使用了 queue: false 选项,该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了,边框的动画就会开始。注意到是并且了吗?是同时进行的~~

#block2要执行的动画中,包含了一系列动画,当前一个动画完成时,后一个动画就会开始。

下次开始讲step!

posted @ 2014-01-05 08:05 易小亨 阅读(...) 评论(...) 编辑 收藏