详解jQuery动画

1. 内置动画：
   (1) 当前这一波动画效果为：显示或隐藏
   固定的，只能显示，或隐藏，而且，方向不可改变，大小不可改变，除了运动时间，什么都不能改
   隐藏：.hide()
   HTML代码

		<input type="button" id="btn1" value="隐藏">

JS代码

	  $("#btn1").click(function(){
	        $("#box6").hide(200,"linear",function(){
	            alert("动画结束了")
	        });
	    })

显示.show()
HTML代码

	<input type="button" id="btn2" value="显示">

JS代码

	 $("#btn2").click(function(){
	    	$("#box6").show(200);
		})

隐藏或显示：.toggle()
HTML代码

	<input type="button" id="btn3" value="隐藏/显示">

JS代码

   $("#btn3").click(function(){
        $("#box6").toggle(200);
    })

(2) 上拉，下拉
上拉：.slideUp()
HTML代码

	<input type="button" id="btn4" value="上拉">

JS代码

    $("#btn4").click(function(){
        $("#box6").slideUp(1000);
    })

下拉：.slideDown()
HTML代码

	<input type="button" id="btn5" value="下拉">

JS代码

	 $("#btn5").click(function(){
	        $("#box6").slideDown(1000);
	    })

上拉或下拉：.slideToggle()
HTML代码

	<input type="button" id="btn6" value="上拉/下拉">

JS代码

	$("#btn6").click(function(){
	    $("#box6").slideToggle(1000);
	})

(3) 淡入，淡出
淡出：.fadeOut()
HTML代码

	<input type="button" id="btn7" value="淡出">

JS代码

  $("#btn7").click(function(){
        $("#box6").fadeOut();
    })

淡入：.fadeIn()
HTML代码

	<input type="button" id="btn8" value="淡入">

JS代码

    $("#btn8").click(function(){
        $("#box6").fadeIn();
    })

淡出或淡入：.fadeToggle()
HTML代码

	<input type="button" id="btn9" value="淡出/淡入">

JS代码

    $("#btn9").click(function(){
        $("#box6").fadeToggle();
    })

到某一个透明度：.fadeTo()
HTML代码

	<input type="button" id="btn10" value="有点透明">

JS代码

    $("#btn10").click(function(){
        $("#box6").fadeTo(1000,0.3);
    })

2. 自定义动画
   .animate({目标},毫秒数,回调函数（动画结束后实现的）)
   HTML代码

	 <input type="button" id="btn11" value="走你">
	    <div id="box7"></div>

JS代码

	 $("#btn11").click(function(){
	        $("#box7").animate({
	            width:0,
	            height:0,
	            left:50,
	            top:80
	        },2000,function(){
	            alert("结束了")
	        })
	    })

3. 链式动画：一个接一个
   (1) .animate({}).animate({}).animate({})
   animate与animate之间是同步执行
   animate与其他方法（css）是异步执行
   让animate与其他方法（css）同步执行
   回调函数
   Queue方法：将其他方法强行变成同步，不是为了动画而生，而是为了异步转同步而生

		.queue(function(next){
			next();
		})

4. 动画的控制
   延迟执行动画（加在动画开始之前）：.delay(毫秒数)
   停止动画：.stop()

• 所谓的停止动画，其实要分两个动作进行，一个当前动画，一个是等待动画，真正想要的停止，就是停在当前位置不走了：既要清除当前动画，又要删除等待动画

Stop方法接收了两个参数：都是布尔值
参数1：表示动画队列的操作

• True：删除队列
• False：没有删除队列

参数2：表示当前动画的操作

• True：表示当前动画立即运动到终点
• False：当前动画停止，开启队列中的下一个动画

直接运动到最后一个动画的终点：.finish()
HTML代码

	 <input type="button" id="btn1" value="走你">
    <input type="button" id="btn2" value="停下">
    <div id="box3"></div>

JS代码

	$("#btn2").click(function(){
	    $("#box3").stop(true,false);
	})
	$("#btn2").click(function(){
	    $("#box3").finish();
	})