jQuery-4.動畫篇---動畫切換的比較（toggle與slideToggle以及fadeToggle的比較）

jQuery中toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。
例如：

• 改變樣式display為none
• 設置位置高度為0
• 設置透明度為0

都能達到這個目的，並且針對這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法

toggle、sildeToggle以及fadeToggle的區別：

• toggle：切換顯示與隱藏效果
• sildeToggle：切換上下拉卷滾效果
• fadeToggle：切換淡入淡出效果

當然細節上還是有更多的不同點:

toggle與slideToggle細節區別：

• toggle：動態效果為從右至左。橫向動作，toggle通過display來判斷切換所有匹配元素的可見性
• slideToggle：動態效果從下至上。豎向動作，slideToggle 通過高度變化來切換所有匹配元素的可見性

fadeToggle方法

• fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

• 元素是淡出顯示的，fadeToggle() 會使用淡入效果顯示它們。

• 元素是淡入顯示的，fadeToggle() 會使用淡出效果顯示它們。

• 注釋：隱藏的元素不會被完全顯示（不再影響頁面的布局）

  <h2>toggle與slideToggle以及fadeToggle的比較</h2>
    <p>測試文字淡入效果</p>
    <p>專注分享</p>
    動畫切換：
    <select id="animation">
        <option value="1">toggle</option>
        <option value="2">slideToggle</option>
        <option value="3">fadeToggle</option>
    </select>
    <input id="btnShow" type="button" value="點擊切換" />
    <script type="text/javascript">

    $("#btnShow").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").toggle();
        } else if (v == "2") {
            $("p").slideToggle("slow");
        } else if (v == "3") {
            $("p").fadeToggle(1000, "linear");
        }
    });
    </script>