2010年11月18日 星期四

jQuery.slideToggle() 的用法

看過別人製作的滑動效果,就好像animate函數一樣,打開原始碼看到的是slideToggle
好奇心重的我,就去查了一下如何使用,這種事情當然要去拜碼頭(官網),提供的範例也很貼心簡而易懂
英文很差的我只好先照本宣科,自己實作一下囉。
官網本身有提供兩種表達方式

第一種:
英文語法:.slideToggle( [ duration ], [ callback ] )
中文語法:.slideToggle( [ 持續時間 ], [ 收回 ] );
第二種:
英文語法:.slideToggle( [ duration ], [ easing ], [ callback ] )
中文語法:.slideToggle( [ 持續時間 ],[ 容易的 ], [ 收回 ] );

1).程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //button標籤加入click事件讓.content觸發slideToggle
                $('button').click(function(){
                    $('.content').slideToggle('slow');
                });
            });
        </script>
        <style type="text/css">
            div{
                text-align: center;
                margin:10px;
            }
            /* 預設content為隱藏 */
            .content{
                display: none;
                margin: auto;
                width: 500px;
                height: 300px;
                background-color: #8b4513;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="content">
                滑動效果測試滑動效果測試滑動效果測試滑動效果測試滑動效果測試滑動效果測試
                滑動效果測試滑動效果測試滑動效果測試滑動效果測試滑動效果測試滑動效果測試
            </div>  
        </div>
        <div class="button">
            <button>clcik me</button>
        </div>
    </body>
</html>

2)執行畫面






3)click後畫面

沒有留言: