宜宾网站建设公司

​jQuery中animate的用法-创新互联

小编给大家分享一下 jQuery中animate的用法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

成都创新互联10多年成都定制网站服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都定制网站及推广,对成都工商代办等多个方面拥有丰富的网站设计经验的网站建设公司。

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

animate：返回jQuery对象

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

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

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

1、properties

类型:

一个CSS属性和值的对象,动画将根据这组对象移动。

2、duration (默认: 400)

类型: Number or String

一个字符串或者数字决定动画将运行多久。（默认值: "normal"， 字符串"slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）

3、easing (默认: swing)

类型: String

一个字符串，表示过渡使用哪种缓动函数。（jQuery自身提供"linear" 和 "swing"）

4、complete

类型: Function()

在动画完成时执行的函数。

二、animate( properties, options )

1、properties

类型: PlainObject

一个CSS属性和值的对象,动画将根据这组对象移动。

2、

类型: 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）、 (default: true)

Type: Boolean or String

一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用.dequeue("queuename")来启动它。

4）、specialEasing

Type: PlainObject

由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。( 1.4 新增)

5）、

Type: Function( Number now, Tween tween )

每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。

6）、

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要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。

看完了这篇文章，相信你对 jQuery中animate的用法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：​jQuery中animate的用法-创新互联
标题来源：http://ybzwz.com/article/dgippc.html

其他资讯