<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <input type="button" value="隐藏"> <input type="button" value="显示"> <input type="button" value="切换"> <input type="button" value="滑出"> <input type="button" value="滑入"> <input type="button" value="切换"> <input type="button" value="淡出"> <input type="button" value="淡入"> <input type="button" value="切换"> <div></div> <script src="jquery-3.2.1.js"></script> <script> $(function () { // toggle 会根据动画效果来自动切换 // 显示隐藏 $("input").eq(0).click(function () { $("div").hide(1000); }) $("input").eq(1).click(function () { $("div").show(1000); }) $("input").eq(2).click(function () { $("div").toggle(1000); }) // 滑入滑出 $("input").eq(3).click(function () { $("div").slideUp(1000); }) $("input").eq(4).click(function () { $("div").slideDown(1000); }) $("input").eq(5).click(function () { $("div").slideToggle(1000); }) // 淡入淡出 $("input").eq(6).click(function () { $("div").fadeOut(1000); }) $("input").eq(7).click(function () { $("div").fadeIn(1000); }) $("input").eq(8).click(function () { $("div").fadeToggle(1000); }) }) </script> </body> </html>