详解jquery动画

内置动画：
当前这一波动画效果为：显示或隐藏
固定的，只能显示，或隐藏
而且，方向不可改变，大小不可改变
除了运动时间，什么都不能改
点击隐藏
$("#btn1").click(function(){
$("#box").hide(200,“linear”,function(){
console.log("动画结束了
});
})

 点击显示动画
 $("#btn2").click(function(){
     $("#box").show(200);
 })
 点击显示或隐藏
 $("#btn3").click(function(){
     $("#box").toggle(200);
 })
 点击动画上拉
 $("#btn4").click(function(){
     $("#box").slideUp(1000);
 })
 
 点击动画下拉
 $("#btn5").click(function(){
     $("#box").slideDown(1000);
 })
 
 点击上拉或下拉
 $("#btn6").click(function(){
     $("#box").slideToggle(1000);
 })
 
  淡出，淡入
  $("#btn7").click(function(){
     $("#box").fadeOut();
 })
 $("#btn8").click(function(){
     $("#box").fadeIn();
 })
 $("#btn9").click(function(){
     $("#box").fadeToggle();
 })
 $("#btn10").click(function(){
     $("#box").fadeTo(1000,0.3);//第一个参数为动画从开始到结束的时间，第二个参数为透明度
 })

自定义动画
$("#box").click(function(){
$("#box").animate({
width:0,
height:0,
top:80,
left:50
},1000,function(){
console.log(“结束”);
});

链式动画：一个动画结束后，开启另一个元素的动画
$("#btn1").click(function(){
$("#box").animate({
left:500
}).animate({
top:500
}).animate({
left:0
}).animate({
top:30
})
}）
animate与animate之间是同步执行
animate与其他方法(css)是异步执行
$("#box").animate({
left:500
}).animate({
top:500
}).css({
background:“yellow”
})
如果想要让animate与css同步执行需要使用queue，或使用回调函数，queue是为了异步转同步而生
$("#box").animate({
left:500
}).animate({
top:500
}).queue(function(next){
$("#box").css({
background:“yellow”
})
next();
}).animate({
left:0
})
});
动画延迟:
$("#box").delay(1000).animate({left:100});//1秒后执行动画
停止动画:
$("#box").click(function(){
$("#box").stop();
})
直接运动到最后一个动画的终点：
$("#box").click(function(){
$("#box").finish();
})