<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> </head> <body> <div><input id="xianshi" type="button" value="显示"></div> <div><input id="yincan" type="button" value="隐藏"></div> <div><input id="togg" type="button" value="toggle"></div> <div id="dda" style="display:none;background-color: #336699;height: 100px"></div> </body> <script> $("#xianshi").click(function () { $("#dda").slideDown(1000); }); $("#yincan").click(function () { $("#dda").slideUp(1000); }); $("#togg").click(function () { $("#dda").slideToggle(1000); }); </script> </html>