jQuery动画之animate()

jQuery的animate方法允许你自定义动画效果，它最基本的语法是：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
1、最简单的animate()
例：$(".button").click(function (){$(".div").animate({top:"200px"})})
这是最简单的例子 点击button按钮后 div 一定到top为200px的位置。

需要注意的是：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
重点内容如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
animate方法几乎可以操作所有的css属性。但有一点需要注意：类似于font-size这样的属性必须写成fontSize这样的形式。 当然animate可以操作多个css属性这里就不多赘述了。

2、jQuery animate() - 使用相对值

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

这样的写法可以实现连续点击时样式的不断变化。这是我之前没有注意的。今天再次细细研究时由衷的感觉到 write less do more 的意义所在。

更为奇妙的是 它还可以使用jQuery预定的值来实现动画效果。
3、jQuery animate() - 使用预定义的值 （”show”、”hide” 或 “toggle”）

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

这样赋值以后居然就可以实现div的‘显示’和‘隐藏’。 Amazing！！

4、jQuery animate() - 使用队列功能
如果你编写了多个animate()调用 jQuery会逐个运行这些animate()调用。实现连续的动画效果

$("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");
}); 

5、callback函数
在动画执行完成后会执行回调函数
例：$(".button").click(function() {$(".div").animate({top:"200px"}),function (){ alert("完成了动画效果")}})
在div移动到top值为200px后 会弹出“完成了动画效果”。