jQuery animate()方法详解、实例、扩展（详细版）

jQuery animate()方法详解、实例、扩展（详细版）

　　一、语法

　　先看看官方文档怎么写的。

语法 1

　　$(selector).animate(styles,speed,easing,callback)

参数描述styles

　　必需。规定产生动画效果的 CSS 样式和值。

　　可能的 CSS 样式值（提供实例）：

• backgroundPosition
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• font
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

　　注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

speed

　　可选。规定动画的速度。默认是 "normal"。

　　可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

easing

　　可选。规定在不同的动画点中设置动画速度的 easing 函数。

　　内置的 easing 函数：

• swing
• linear

　　扩展插件中提供更多 easing 函数。

callback

　　可选。animate 函数执行完之后，要执行的函数。

　　如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

语法 2

　　$(selector).animate(styles,options)

参数描述styles必需。规定产生动画效果的 CSS 样式和值（同上）。options

　　可选。规定动画的额外选项。

　　可能的值：

• speed - 设置动画的速度
• easing - 规定要使用的 easing 函数
• callback - 规定动画完成之后要执行的函数
• step - 规定动画的每一步完成之后要执行的函数
• queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
• specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

　　二、实例

　　先来个官方最简单的：

　　$("#btn1").click(function(){ $("#box").animate({height:"300px"}); });

解析：$("#btn1").click    点击 id="btn1" 的元素时，执行动画

　　$("#box").animate({height:"300px"});   给 id="box" 的元素定义了一个动画，速度等其他参数默认，样式是  height 变成 300px

　　调试地址

　　再来个变化后的全参数版本：

　　$(document).ready(function() { $(".btn1").click(function(){ $("#box").animate({height:"300px"},3500,"linear",ShowMsg()); }); $(".btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); //回调函数 function ShowMsg(){ alert("执行完毕！"); }

解析：$("#box").animate({height:"300px"},3500,"linear",ShowMsg());   height:"300px"表示样式；3500 动画时间(毫秒)；

　　"linear"表示效果，通常使用插件进行效果扩展，推荐：jquery.easing

　　ShowMsg() 回调函数，这个参数比较有用，可以用来控制多个动画的顺序，详细用法参见：jQuery Callback

　　再看下多个属性一起改变：

　　$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5',//透明度 height:'150px', width:'150px' }); });

解析：多个属性可以用逗号隔开一起写，动画中会一起改变

　　官方调试地址

　　注意：这些属性和css属性几乎一样，但是并不是css属性，所以书写时要特别注意。

　　例如：必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

　　那如果要改变的只是一个增加值怎么处理呢：

　　$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });

官方调试地址

　　再看一个不常用但是有意思的用法：

　　$("button").click(function(){ $("div").animate({ height:'toggle' //可以使用： "show"、"hide" 或 "toggle" }); });

官方调试地址

　　最重要的一个功能来了：队列动画

　　前面我们演示多个属性一起变，那一定会有多个属性按照顺序一个个执行，就可以做出连续的动画。

　　上例子：

　　$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });

官方调试地址

　　再看一个对比：

　　animate({left:"+=50px", top:"50px"}, 300) //同时改变 animate({left:"+=50px"}, 300).animate({height:"+=50px", 340}) //队列改变

发散一下，我们也可以使用回调函数一个个调方法

　　animate({left:"+=50px", 300, 

　　function (){ $(this).css("background-color","red") }}).animate(...);

先执行第一个animate，再执行回调中的css()，最后执行第二个animate();

　　还有一些常用动画可以直接调用：

　　show()和hide()
如果加入毫秒数参数，则是同时修改高度、宽度、以及不透明度。
fadeIn()和fadeOut()
只是改变不透明度。
slideUp()和slideDown()
只改变高度。
fadeTo()
只改变不透明度至某一值。
toggle()                                  //显示
slideToggle()                          //高度

　　三、扩展

　　如果一个动画还没执行完就要执行新的动画怎么处理呢？

　　停止动画：

语法

　　$(selector).stop(stopAll,goToEnd)

参数描述stopAll可选。规定是否停止被选元素的所有加入队列的动画。goToEnd

　　可选。规定是否允许完成当前的动画。

　　该参数只能在设置了 stopAll 参数时使用。

　　上例子：

　　$("#stop").click(function(){ $("#box").stop(); });

官方调试地址

　　同样，停止队列动画：

　　$("#box").stop(true);

动画执行完成停止队列动画：

　　$("#box").stop(true,true);

区别：队列动画是多个小动画连接成的， 

　　stop(true)

是停止在当前状态，即立即停止

　　stop(true,true)

是执行完当前的小动画后停止执行后面的动画

　　直接跳到动画结尾：

　　$("#box").stop(true,false);

　　实际问题：

　　一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏


如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。
 
解决方法：在写动画效果的代码前加入stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）

　　有时候点击很快时，会造成动画积累，这是就用到一个方法：

　　$(this).is(":animated")