<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

    </head>

    <style type="text/css"> 

        div.panel,p.flip

        {

        margin:0px;

        padding:5px;

        text-align:center;

        background:#e5eecc;

        border:solid 1px #c3c3c3;

        }

        div.panel

        {

        height:120px;

        }

    </style>

    <body>

        <div class="panel">

            <p>W3School - 領先的 Web 技術教程站點</p>

            <p>在 W3School，你可以找到你所需要的所有網(wǎng)站建設教程。</p>

        </div>

            <p class="flip">請點擊這里</p>

        <script type="text/javascript">

            $(document).ready(function(){

                $(".flip").click(function(){

                    $(".panel").slideUp(300);

                });

            });

        </script>    

    </body>

</html>

重點（Tips）:

1、click 事件按鈕的選擇

在這個斷碼中是 “.flip”

2、節(jié)點的選擇

　　在這段代碼中是 “.panel”

再貼一段代碼

復制代碼代碼如下:

        <script type="text/javascript">

            $(document).ready(function(){

                $(".flip").click(function(){

                    $(".panel").slideToggle(300);

                });

            });

        </script>

.slideToggle 事件

將這個滑動效果進行了 Up 和 Down 的2中效果都展示出來

以上內(nèi)容就是關于jQuery中slideUp 和 slideDown 的詳細講解了，希望大家能夠喜歡。

您可能感興趣的文章: