anonymous jQuery显示隐藏方法
-
hide（）方法
元素隐藏，隐藏的前提必须是元素display:block；
-
show（）方法
元素显示，显示的前提必须是元素display:none;
-
toggle（）方法
在元素隐藏和显示之间进行切换
这三种方法设置的效果，在过程中还可以出现过渡动画
• 如果不传参数，直接显示和隐藏就没有过渡动画
• 如果传参数：
•单词格式：”slow“ , "normal" , "fast"
• 数字格式：单位是毫秒，在规定时间内会出现显示或 隐藏的动画。
<body> <div > <img src="../../imgs/1.jpg" alt=""><br> </div> <input type="button" value="只会隐藏" id="btn1"> <input type="button" value="只会显示" id="btn2"> <input type="button" value="可以隐藏、显示切换" id="btn3"> <script src="../jq/jquery-1.12.4.min.js"></script> <script> var $img = $("img"); var $btn1 = $("#btn1") var $btn2 = $("#btn2"); var $btn3 = $("#btn3"); //添加点击事件，实现图片隐藏或显示 $btn1.click(function(){ // $img.hide("slow"); $img.hide(1000); }) $btn2.click(function(){ $img.show("normal"); }) $btn3.click(function(){ $img.toggle("fast"); })</script>过渡时间内，伴随着宽度和高度以及透明度的变化
滑动显示隐藏
- slideDown（）：滑动显示（方向不一定）
- slideUp（）：滑动隐藏
- slideToggle（）：滑动切换
让元素在display属性的block 和 none 之间进行切换
- 如果不传参数，默认的过渡时间是400毫秒。
- 如果传参数：
.........
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)