jQuery animate()步骤详解、实例、扩展（详细版）

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

一、语法

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

参考：http://www.w3school.com.cn/jquery/effect_animate.asp

语法 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")