## jQuery動畫
### 1. show() 方法和 hide() 方法
* 調用`hide()`方法會將元素的display樣式改為' none '。
* `show()方法`將元素的display樣式設置為先前的顯示狀態。
* `show()`方法和`hide()`方法的參數可以指定毫秒值，緩慢的隱藏和展示。
```javascript
$('p').toggle(function(){
$(this).hide(2000);
},function(){
$(this).show(2000);
})
```
### 2.fadeIn()和fadeOut()方法
fadeIn()和fadeOut()方法只改變元素的不透明度。
fadeOut()方法會在指定的一段時間內降低元素的不透明度，直到元素完全消失（display:none）。
~~~javascript
$('p').toggle(function(){
$(this).fadeOut();
},function(){
$(this).fadeIn();
})
~~~
### 3.slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法只會改變元素的高度。
如果一個元素的 display 屬性值為'none',調用slideDown()方法時，這個元素將由上至下延伸顯示。slideUp()方法正好相反，元素將由下到上縮短隱藏。
~~~javascript
$('p').toggle(function(){
$(this).slideUp();
},function(){
$(this).slideDown();
})
~~~
> jQuery中任何動畫效果，都可以指定3種速度參數。slow,normal和fast，使用時記得加上引號。
### 4.animate()方法
可以使用animate()方法來自定義動畫。
結構：`animate(params,speed,callback)`
~~~javascript
$('#panel').click(function(){
lg('click');
$(this).animate({left:'+=500px'}, 3000);
});
//多重動畫
$('#panel').click(function(){
lg('click');
$(this).animate({left:'+=500px',top:'+=500px'}, 30000);
});
~~~
