jQuery打字机小练习

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>
相关推荐
hunteritself14 分钟前
DeepSeek重磅升级,豆包深度思考,ChatGPT原生生图,谷歌Gemini 2.5 Pro!| AI Weekly 3.24-3.30
人工智能·深度学习·chatgpt·开源·语音识别·deepseek
旭久22 分钟前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶27 分钟前
关于React Redux
前端
阿丽塔~30 分钟前
React 函数组件间怎么进行通信?
前端·javascript·react.js
Panesle44 分钟前
transformer架构与其它架构对比
人工智能·深度学习·transformer
dundunmm1 小时前
【论文阅读】Self-Correcting Clustering
论文阅读·深度学习·数据挖掘·聚类
冴羽1 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom1 小时前
Langflow:打造AI应用的强大工具
前端·面试·github
前端小张同学1 小时前
AI编程-cursor无限使用, 还有谁不会🎁🎁🎁??
前端·cursor
yanxy5121 小时前
【TS学习】(15)分布式条件特性
前端·学习·typescript