Animation

• 顯示/隱藏:show， hide， toggle
• 滑動：slideDown，slideUp，slideToggle
• 淡入淡出：fadeIn， fadeOut， fadeToggle， fadeTo
• 自定義：animate，stop，delay

顯示/隱藏

1. show( ): 顯示

$("#btn").click(function(){
        $("div").show()
        })

2. hide( ): 隱藏

$("#btn").click(function(){
        $("div").hide()
        })

3. toggle( ): 顯示/隱藏切換

$("#btn").click(function(){
        $("div").toggle()
        })

滑動

1. slideDown( ): 動畫效果，只調整元素的高度，可以使匹配的元素以“滑動”的方式（向下增大）顯示出來

$("#btn").click(function(){
        $("img").slideDown()
        })

2. slideUp( ): 動畫效果，通過高度變化，使匹配的元素以“滑動”的方式（向上減小）隱藏起來

$("#btn").click(function(){
        $("img").slideUp()
        })

3. slideToggle( ): 動畫效果，切換匹配元素的可見性

$("#btn").click(function(){
        $("img").slideToggle()
        })

淡入淡出

1. fadeIn( ): 通過不透明度的變化來實現所有匹配元素的淡入效果，即顯示

$("#btn").click(function(){
        $("img").fadeIn()
        })

2. fadeOut( ): 通過不透明度的變化來實現所有匹配元素的淡出效果，即隱藏

$("#btn").click(function(){
        $("img").fadeOut()
        })

3. fadeToggle( ): 開關所匹配元素的淡入和淡出效果

$("#btn").click(function(){
        $("img").fadeToggle()
        })

注意
以上方法 show， hide， toggle，slideDown，slideUp，slideToggle，fadeIn， fadeOut， fadeToggle 可以傳三個參數 show([speed],[easing],[fn])

$("#btn").click(function(){
        $("img").fadeOut("fast","linear",function(){
           console.log("Animation Done.");
        })

4. fadeTo( ) : 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度
   show([speed],opacity,[easing],[fn]) 參數 opacity ：指定的不透明度

$("#btn").click(function(){
        $("img").fadeTo("fast", 0.25,"linear",function(){
           console.log("Animation Done.");
        })