jQuery打字机小练习

Json_2025-04-01 13:46
xml 复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>打字机</title>
    <style>
        div{
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: red;
            color:#a7b5bc;
            margin: 10px;
            border-radius: 80px;


        }
    </style>
    <script src="../jquery-1.8.2.js"></script>
    <script>
        $(function(){
            //利用递归的思想来做打字机
            $('button:first').on('click',function(){
                $('div:first').slideDown(1000,function test(){
                    $(this).next().slideDown(1000,test)
                })
            })
            $('button:last').on('click',function(){
                $('div:last').slideUp(1000,function test(){
                    $(this).prev().slideUp(1000,test);
                })
            })
        })
    </script>
</head>
<body>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
    <button >显示</button>
    <button>隐藏</button>
</body>
</html>