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>