41-jQuery展开和收起动画

xiaoxiao2025-10-22  17

感想:本节学习了slideDown(),slideUp(),slideToggle()方法,jQuery封装的一些dom对象的方法用起来非常方便,若是         在原生JS中,还需要使用监视器进行监听,实现起来比较麻烦

<!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>

 

转载请注明原文地址: https://www.6miu.com/read-5038373.html

最新回复(0)