jquery實現動畫效果

時間 2019-11-11

原文原文鏈接

/*
*    我這個頁面有用tp，因此引用文件和php有點區別
*    首先你是要下載好jquery庫文件，將jquery.js文件放到你想要放的地方，當前目錄下也能夠
*    我是將文件放到了wamp/www/think_message(這是本身的項目名)/Public/Js/ju\qery.js
*    裝了wamp，c盤就會有wamp/www這個路徑但下面的就是本身建的
*    接着就是在，在你的html頁面引用jqery.js文件，就可寫jq代碼
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Language" content="zh-cn" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <load file="__PUBLIC__/Js/jquery.js"/>
    <load file="__PUBLIC__/Css/test.css"/>
    <script language="javascript">
        $(function(){
            $('#show').click(function(){  //click id=show的標籤就觸發
                $('.box').first().show(600,function showTest(){  //將class=box的標籤顯示（原先隱藏）
                    $(this).next().show(600,showTest);//（600是動畫時間，第二個參數是函數名（兩個均可缺省））
                });
            });
            $('#hide').click(function(){
                $('.box').last().hide(600,function hideTest(){
                    $(this).prev().hide(600,hideTest);
                });
            });
        });
    </script>
<body>
    <input type="button" id="show" value="顯示"/>
    <input type="button" id="hide" value="隱藏"/>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。