本文共 2449 字，大约阅读时间需要 8 分钟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #div1{ background-color: #EEEEEE; border: 1px solid #666666; width: 400px; height: 200px; } #divFunc{ width: 250px; } .btn{ border: 1px solid #666666; padding: 2px; width: 120px; height: 30px; margin-right: 5px; margin-top: 15px; float: left; } </style> <script src="../js/jquery-3.5.1.js"></script> <script> //使用animate方法代替其他动画方法 $(document).ready(function () { $("input:eq(0)").click(function () { $("#div1").hide(600); }); $("input:eq(1)").click(function () { $("#div1").animate({height:"hide",width:"hide",opacity:"hide"},600); }); $("input:eq(2)").click(function () { $("#div1").fadeOut(600); }); $("input:eq(3)").click(function () { $("#div1").animate({opacity: "hide"},600); }); $("input:eq(4)").click(function () { $("#div1").slideUp(600); }); $("input:eq(5)").click(function () { $("#div1").animate({height: "hide"},600); }); $("input:eq(6)").click(function () { $("#div1").fadeTo(600,"0.2"); }); $("input:eq(7)").click(function () { $("#div1").animate({opacity:"0.2"},600) }); $("#btnShow").click(function () { $("#div1").fadeTo(600,"1.0").show("normal"); }); }); </script></head><body> <div id="div1"></div> <div id="divFunc"> <input type="button" id="btn1" value="hide" class="btn"> <input type="button" id="btn2" value="animate hide" class="btn"> <input type="button" id="btn3" value="fadeOut" class="btn"> <input type="button" id="btn4" value="animate fadeOut" class="btn"> <input type="button" id="btn5" value="slideUp" class="btn"> <input type="button" id="btn6" value="animate slideUP" class="btn"> <input type="button" id="btn7" value="fadeTo" class="btn"> <input type="button" id="btn8" value="animate fadeTo" class="btn"> <input type="button" id="btnShow" value="show" class="btn"> </div></body></html>
转载地址：http://olem.baihongyu.com/