感想:本节学习了slideDown(),slideUp(),slideToggle()方法,jQuery封装的一些dom对象的方法用起来很是方便,如果
在原生JS中,还须要使用监视器进行监听,实现起来比较麻烦html
<!DOCTYPE html> <html lang="en"> <head> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 300px; background: red; display: none; } </style> <meta charset="UTF-8"> <title>41-jQuery展开和收起动画</title> <script src="JS_file/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { $("div").slideDown(1000,function () { alert("展开完毕"); }) }); $("button").eq(1).click(function () { $("div").slideUp(1000,function () { alert("收起完毕"); }) }); $("button").eq(2).click(function () { $("div").slideToggle(1000,function () { alert("切换完毕"); }) }); }) </script> </head> <body> <button>展开</button> <button>收起</button> <button>切换</button> <div></div> </body> </html>