hide（）和show（）方法

·hide（）：元素隐藏，隐藏的前提必须是元素 display:block；

·show（）：元素显示，显示的前提必须是元素 display:none；

·toggle（）：在元素隐藏和显示之间进行切换。

·这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。

参数

·如果不传参数：直接显示和隐藏，没有过渡动画。

·如果传递参数：

·单词格式：”slow”，”normal”，”fast”

·数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。

·过渡时间内，伴随着宽度和高度以及透明度的变化。

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <style> img { display: block; width: 320px; height: 480px; } </style> </head> <body> <input type=“button” value=“隐藏” id=“btn1”> <input type=“button” value=“显示” id=“btn2”> <input type=“button” value=“切换” id=“btn3”><br> <img src=“images/cat.jpg” id=“pic”> <script src=“js/jquery-1.12.4.min.js”></script> <script> // 获取元素 var $pic = $(“#pic”) var $btn1 = $(“#btn1”) var $btn2 = $(“#btn2”) var $btn3 = $(“#btn3”) // 添加点击事件，让图片实现显示和隐藏 $btn1.click(function () { // $pic.hide(“slow”); $pic.hide(1000); }) $btn2.click(function () { $pic.show(“normal”); }) $btn3.click(function () { $pic.toggle(“fast”); }) </script> </body> </html>