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>
相关推荐
每天都要写算法(努力版)几秒前
【神经网络与深度学习】训练集与验证集的功能解析与差异探究
人工智能·深度学习·神经网络
前端太佬4 分钟前
从拧螺丝到造火箭:Git高阶玩家生存报告
前端·git·github
前端太佬4 分钟前
从青铜到塑料:Git逃难指南(附救命指令大全)
前端·git·github
格子惊蛰版5 分钟前
🪲正在开发后台管理系统的同学 UnoCSS 一定要用起来
前端·css
Postkarte不想说话7 分钟前
使用WebGL绘制一个三角形
前端
醋醋10 分钟前
vue2源码记录4
前端·vue.js
ccattempt11 分钟前
夯实基础-迭代器与生成器
前端
我怎么能这么帅气13 分钟前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
迷路的小绅士24 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
BB_CC_DD28 分钟前
四. 以Annoy算法建树的方式聚类清洗图像数据集,一次建树,无限次聚类搜索,提升聚类搜索效率。(附完整代码)
深度学习·算法·聚类