jQuery 上下滑动

目录

　　jQuery slideDown()

　　jQuery sliedeUp()

　　jQuery slideToggle()

jQuery slideDown()

jQuery slideDown() 方法用于向下滑动元素。

案例：

<button class="show">show</button>
<p class="q" style="display: none;">qqqqqqqqqqq</p>
<p class="c">ccccccccccc</p>
<script>
    $(document).ready(function(){
        $(".show").click(function(){
            $(".q").slideDown("slow");
        });
    });
</script>

jQuery sliedeUp()

jQuery sliedeUp() 方法用于向上滑动元素。

案例：

<button class="show">show</button>
<p class="q">qqqqqqqqqqq</p>
<p class="c">ccccccccccc</p>
<script>
    $(document).ready(function(){
        $(".show").click(function(){
            $(".q").slideUp("slow");
        });
    });
</script>

jQuery slideToggle()

jQuery slideToggle() 方法可以在slideDown与slideUp()方法之间切换。

案例：

<button class="show">show</button>
<p class="q">qqqqqqqqqqq</p>
<p class="c">ccccccccccc</p>
<script>
    $(document).ready(function(){
        $(".show").click(function(){
            $(".q").slideToggle("slow");
        });
    });
</script>