jQuery(4)——jQuery hide、show方法的简单了解

jQuery hide、show方法的简单了解

jQuery 效果- 隐藏和显示

jQuery 效果- 隐藏和显示在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用
toggle() 方法能够切换 hide() 和 show() 方法。

语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

根据demo:

 $("#hide").click(function(){$("#test").hide();})$("#show").click(function(){$("#test").show();})

hide和show方法实现，F12下：
为元素添加/去除css属性：display: none; 来实现的。

<div id="test"style="display: none;"></div>

有意思的是，当加入了入参(speed）之后，需要变换的css属性就多了，如下图：

首先一个overflow:hidden 接着是width，height，padding，margin，opacity ,当点击显示/隐藏的时候，能看到width,height,opacity(透明度)从0到原大小的变换（或反之）。

toggle

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

语法

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
可选的 callback 参数，具有以下三点说明：
1. $(selector)选中的元素的个数为n个，则callback函数会执行n次
2. callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
3. callback既可以是函数名，也可以是匿名函数

测试demo中，有callback的体现

 //toggle()方法测试$("#hide-show-toggle").click(function(){$("#test3").toggle("slow");})

测试demo:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>jQuery hide-show</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("#test").hide();})$("#show").click(function(){$("#test").show();})/**带参数的hide,show测试hide(speed,callback); show(speed,callback); //speed为完成效果的时间，单位毫秒，callback为执行完成后所执行的方法，两个参数可以单独出现**/function callback(){console.log("success!")}$("#hide_var").click(function(){$("#test2").hide(1000,callback());})$("#show_var").click(function(){$("#test2").show(1000,callback);})//toggle()方法测试$("#hide-show-toggle").click(function(){$("#test3").toggle("slow");})})</script><style>.box{width: 300px;margin:0 auto;border: 2px solid green;}#test,#test2,#test3{width:296px;height: 100px;margin:0 auto;border: 2px solid red;background-color: rgb(250, 205, 80);}</style>
</head>
<body><div class="box"><input id="hide" type="button" value="隐藏"><input id="show" type="button" value="显示"><div id="test"></div></div><div class="box"><input id="hide_var" type="button" value="隐藏"><input id="show_var" type="button" value="显示"><div id="test2"></div></div><div class="box"><input id="hide-show-toggle" type="button" value="隐藏/显示"><div id="test3"></div></div></body>
</html>

demo预览:

width="100%" height="300" scrolling="no" title="hide-show" src="//codepen.io/liantao/embed/OBPrQP/?height=300&theme-id=34712&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen hide-show by 练涛 ( @liantao) on CodePen.

See the Pen hide-show by 练涛 (@liantao) on CodePen.