html文件:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>滑入滑出动画</title> <style> div { 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="显示"> <input type="button" value="隐藏"> <input type="button" value="切换"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ //滑入(slideDown) 滑出:slideUp $("input").eq(0).click(function(){ //slideDown:如果不传参数,有一个默认值normal $("div").slideDown(1000); console.log("1111"); }); $("input").eq(1).click(function(){ $("div").slideUp(); }); $("input").eq(2).click(function(){ $("div").slideToggle(); }) }); </script> </body> </html>