注意：動畫基本都是非同步的，所以在動畫執行之後的某些操作就必須要寫到回撥函式裡

1.動畫基礎隱藏和顯示

注意：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性

$elem.hide() $elem.hide(options) options含有時間引數，單位毫秒，fast和slow分別代表 200和600，也可以是easing等這些 $elem.show() 和hide()用法一致，效果相反 $elem.toggle([duration ] ，[options],[complete] ); hide和show的相互切換，duration是持續時間，complete為完成時執行的函式

2.下拉上卷效果

注意：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

.slideDown( [duration ] ,[easing ],[complete ] )，下拉動畫，初始狀態應為display:none .slideUp( [duration ] ,[easing ] ,[complete ] ) 上捲動畫，引數解釋在文章開頭 .slideToggle( [duration ] ,[ complete ] ) 下拉上卷的切換動畫

3.淡入淡出效果

注意：隱藏的元素，display:none，不會在影響頁面的佈局

.fadeOut( [duration ], [ complete ] )

4.自定義動畫

.animate( properties ,[ duration ], [ easing ], [ complete ] ) .animate( properties, options )

一些常用寫法如下：

one:
$(elem).animate({   
	.animate({
    left: 50, 
    height: "toggle",
    width: '+=50px',
    opacity: 'show',  
    fontSize: "10em"
}, 500);
two:
//如果多個元素執行動畫，回撥將在每個匹配的元素上執行一次，不是作為整個動畫執行一次
$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

停止動畫

在一個元素上同時有多個動畫的情況下 .stop() 停止當前動畫，執行下一個動畫，點選在暫停處繼續開始 .stop(true) 停止當前和所有動畫，直至當前動畫執行完 .stop(true,true) 當前動畫將停止，且當前動畫立刻被改為目標值，後續動畫繼續執行

例如：
$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)
1.stop()：只會停止第一個動畫，第二個第三個繼續
2.stop(true)：停止第一個、第二個和第三個動畫
3.stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態