<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>22_滑动</title> </head> <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: red; } </style> <body> <button id="btn1">慢慢收缩</button> <button id="btn2">慢慢展开</button> <button id="btn3">收缩/展开切换</button> <div class="div1"> </div> <!-- 滑动动画: 不断改变元素的高度实现 1. slideDown(): 带动画的展开 2. slideUp(): 带动画的收缩 3. slideToggle(): 带动画的切换展开/收缩 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求： 1. 点击btn1, 向上滑动 2. 点击btn2, 向下滑动 3. 点击btn3, 向上/向下切换 */ var $div1 = $('.div1') // 1. 点击btn1, 向上滑动 $('#btn1').click(function () { $div1.slideUp(3000) }) // 2. 点击btn2, 向下滑动 $('#btn2').click(function () { $div1.slideDown() }) // 3. 点击btn3, 向上/向下切换 $('#btn3').click(function () { $div1.slideToggle() }) </script> </body> </html>