jquery animate()方法 动画详解（超简单易懂）

jquery animate 动画详解（超简单易懂）

animate（）方法是jquery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。

(selector).animate({styles},speed,easing,callback)

styles  必需。规定产生动画效果的一个或多个 CSS 属性/值。逗号分隔

speed   可选。规定动画的速度。可能的值 毫秒 "slow"  "fast"

easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。可能的值：

• "swing" - 在开头/结尾移动慢，在中间移动快
• "linear" - 匀速移动

提示：扩展插件中提供更多可用的 easing 函数。

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

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

单击按钮盒子变高到300px（达到300px不是在原基础上加300px），speed没写，默认是normal，easing默认swing，可以安装插件在插件中选择更多的移速效果，callback执行函数。
 

注：css属性名必须要采用驼峰命名法，其次个别属性进行操作的时候，要符合要求，比如left top设置时要给相关元素进行定位，在进行颜色设置时，要加入颜色插件才能修改颜色。

多属性

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#box").animate({height:"300px",width:"300px"});//多属性写在一起  同时触发
  });

动画队列 

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#box").animate({height:"300px",width:"300px"}); //动画队列 会按顺寻执行
    $("#box").animate({height:"100px",width:"100px"});
  });
});

 属性相对值

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#box").animate({height:"+=100px",width:"+=300px"});//相对值书写 在原有基础上增加100px
  });
});

 回调函数

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#box").animate({height:"+=100px",width:"+=300px"},2000,function(){   //回调函数
    $("#box").animate({height:"+=100px",width:"+=300px"},2000)});    
  });
});

stop（）停止动画队列 。