锋利的jQuery-4--animate()的用法

1.一般动画：

$("btn").click(function(){
    $("div").animate({"left" : "+=300px"}, 300);  //需要div设置了元素的position属性，否则不管用
});

2.多重动画：

元素在向右滑动的同时，放大元素的高度。

$("btn").click(function(){
    $("div").animate({"left" : "300px", "height" : "200px"}, 300);  //需要div设置了元素的position属性，否则不管用
});

元素向右滑动之后，再放大元素的高度。(像这样动画执行效果具有先后顺序，称之为动画队列)

$("btn").click(function(){
    $("div").animate({"left" : "300px"}, 300)
　　 .animate({"height" : "200px"}, 300);  //需要div设置了元素的position属性，否则不管用
});

3.综合动画：

元素先向右移动同时增大高度并且透明度从50%到100%，然后向下移动同时增大宽度，最后淡出隐藏。

$("btn").click(function(){
    $("div").css("opacity", "0.5");
    $("div").animate({"left" : "300px", "height":"200px", "opacity" : "1" }, 300)
　　 .animate({"top" : "200px", "width" : "200px"}, 300)
　　 .fadeOut("slow");  //需要div设置了元素的position属性，否则不管用
});

注意：如果动画执行完后不是fadeOut(),而是要改css样式，例如：.css({"border" : "5px solid blue"})，并不能得到预期的效果，因为css在动画开始执行的时候，css方法就被执行了。需要使用回调函数：

$("btn").click(function(){
    $("div").css("opacity", "0.5");
    $("div").animate({"left" : "300px", "height":"200px", "opacity" : "1" }, 300)
　　 .animate({"top" : "200px", "width" : "200px"}, 300, function(){
    　　$(this).css("border" : "5px solid blue");
　　 });  //需要div设置了元素的position属性，否则不管用
});

callback回调函数适用于所有jQuery动画效果方法(show,slideDown等)