搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
jQuery 教程
jQuery 效果
源代码
清空
点击运行
<!DOCTYPE html> <html> <title>jQuery 上下滑动效果slideDown和slideUp示例 - 基础教程(div.cn)</title> <head> <style> span { background: #7F00FF; color: white; float: left; padding: 10px 5px; } div { margin-bottom: 15px; } .clearfix::after { content: ''; clear: both; display: table; } </style> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("span:last-child").slideUp("fast", function(){ $(this).prev().slideUp("fast", arguments.callee); }); }); $("#btn2").click(function(){ $("span:first-child").slideDown("fast", function(){ $(this).next().slideDown("fast", arguments.callee); }); }); }); </script> </head> <body> <div class="clearfix"> <span>The</span> <span>purpose</span> <span>of</span> <span>jQuery</span> <span>is</span> <span>to</span> <span>make</span> <span>it</span> <span>much</span> <span>easier</span> <span>to</span> <span>use</span> <span>JavaScript</span> <span>on</span> <span>your</span> <span>website.</span> </div> <button id="btn1">向上滑动</button> <button id="btn2">向下滑动</button> </body> </html>
运行结果