html:

        <button>點選我</button>
	<p>如果你想在一個涉及動畫的函式之後來執行語句，請使用callback函式</p>

	<div class="panel"></div>
	<div class="content"></div>    

css部分：

注意：使用animate函式時，為了能夠影響元素的 top bottom left right 屬性值，需先將position屬性值設定為 relative 或者 absolute　

            .panel {
			width: 100px;
			height: 100px;
			border: 1px solid #0050d0;
			background: red;
			cursor: pointer;
			position: relative;
		}

		.content {
			width: 100px;
			height: 100px;
			margin-top: 20px;
			background: green;
		}        
 

 如果在500之前加上 += 或 -= 代表在當前位置遞增或者遞減　

        $(".panel").click(function() {
			$(this).animate({left: "+=500"},3000);//遞增
         })  

同時執行多個動畫

$(this).animate({left: "500", top: "200"},3000);

按順序執行動畫 -- 動畫佇列

 $(this).animate({left: "500"},3000);
 $(this).animate({top: "200"},3000);

以上可改為 鏈式寫法

$(this).animate({left: "500px"},3000).animate({top: "200px"}, 3000);
 

 綜合動畫
 透明度可以用小數，用百分數無效

$(this).animate({left: "500px", height: "200px", opacity: "0.5"},3000).animate({top: "200px", width: "200px"},3000).fadeOut("slow");

 給hover 事件新增 stop() 方法 可解決移入移出動作過快 導致游標動作與動畫效果不一致的問題
注意： 移入移出都需要新增stop()

$(".panel").hover(function() {
 		$(this).stop().animate({height: "150",width: "300"},3000)
 	},function(){
 		$(this).stop().animate({height: "22",width: "60"},3000)
 	})
 

當遇到的是組合動畫的時候

                    $(".panel").hover(function() {
				$(this).stop()
					.animate({height: "150"},3000)//如果此時游標移出

					.animate({width: "300"},3000)//執行這個動畫 而不是下面移出的動畫
			},function(){
				$(this).stop()
					.animate({height: "22"},3000)
					.animate({width: "60"},3000)
			})            

把stop()第一個引數設定為true ，可以解決上面的問題，跳過width為300的樣式改變 執行滑鼠移出事件

                    $(".panel").hover(function() {
				$(this).stop(true)
					.animate({height: "150"},3000)//如果此時游標移出

					.animate({width: "300"},3000)//執行下面移出的動畫
			},function(){
				$(this).stop(true)
					.animate({height: "22"},3000)
					.animate({width: "60"},3000)
			})

如果stop()第二個引數也設定為true的時候,可以直接到達結束時候的狀態