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>
相关推荐
l12345sy3 分钟前
Day24_【深度学习—广播机制】
人工智能·pytorch·深度学习·广播机制
小桥风满袖34 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心34 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~37 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒44 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript