本篇文章给大家带来的内容是jquery之深入学习animate（一），让大家进一步了解jquery中animate的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
jquery中animate的用法你了解多少呢？如果仅仅是简单的移动位置，显示隐藏，哦！天哪你在浪费资源！因为animate太强大了，你可以有很多意想不到的用法！下面就让我们一起研究一下吧。【相关视频教程推荐：jquery教程】
首先要了解jquery api中animate的详细用法。
animate：返回jquery对象
animate( properties [, duration ] [, easing ] [, complete ] )
描述: 根据一组 css 属性，执行自定义动画。
一、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()
在动画完成时执行的函数。
二、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; // objecttypeof d; // objecttypeof o; // object jquery.isplainobject( a ); // falsejquery.isplainobject( d ); // falsejquery.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 就留到下次在讲解吧！
以上就是jquery之深入学习animate（一）的详细内容。