## 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); }); ~~~