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() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：