JQuery學習（2）

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

<script type="text/javascript">
        $(document ).ready (function () {

            $("#z1").click(function () {
                  $("p").toggle();

                });

        });
    </script>

 

jQuery 動畫 - animate() 方法

jQuery animate() 方法用於創建自定義動畫。

<script type="text/javascript">
        $(document ).ready (function () {

            $("button").click(function () {
                $("#div3").animate({
                
                    left:'250px',
                    height:'150px',
                    width:'150px',
                    opacity:'0.5'    // 色度淡化
              });
            });

        });
    </script>

必需的 params 參數定義形成動畫的 CSS 屬性。

提示：默認地，所有 HTML 元素都有一個靜態位置，且無法移動。

如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！

提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫並不包含在覈心 jQuery 庫中。

如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。

 

 

jQuery animate() - 使用相對值

也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：