2015.8.27-js(animate动画)

1.animate的格式  $("div").animate({fontSize:"20px"},3000)

   $("#wrap").click(function(){
        $(this).stop().animate({width:"200px"},3000)
   })

2.连续动画

$("#wrap").animate({width:"200px"},300).animate({width:"100px"},300)

3.回调函数

$("#wrap").animate({width:"200px"},300).animate({width:"100px"},300)},function(){
    alert("callback");
};

4.stop()研究

$('#wrap').stop().animate({'left':'500px'},1000).animate({'left':'0px'},1000); //单个动画时停止当前动画，鼠标快速移入移出多次也会将动画全部完成，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会暂停在路中 

$('#wrap2').stop(true).animate({'left':'500px'},1000).animate({'left':'0px'},1000); //单个动画时停止所有动画 ，停止所有动画 去的路程中点击停止会直接到达终点，若是返回过程中再点击，会暂停在路中 

$('#wrap3').stop(true,true).animate({'left':'500px'},1000).animate({'left':'0px'},1000); //单个动画时停止所有动画 直接跳到终点，// 停止所有动画 ，去的路程中点击停止会直接到达终点，若是返回过程中再点击，会停止到在起点 

PS 

工作中遇到过的实际案例：

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

如果快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。

解决方法：在写动画效果的代码前加入stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）