jQuery Hide() 和fadeOut()、show() 和fadeIn() 之间的JQuery 区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33982329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Difference between hide() and fadeOut() , show() and fadeIn()
提问by Salman Nazir
I am new to jQuery. Currently, I am working with jQuery in my one of Cross Platform Mobile Applications. I need to hide and show some of my Page Contents on respective conditions. I have found following two methods that are working fine for me.
我是 jQuery 的新手。目前，我正在我的跨平台移动应用程序之一中使用 jQuery。我需要在相应的条件下隐藏和显示我的一些页面内容。我发现以下两种方法对我来说效果很好。
$( "#myControlId" ).fadeOut();
$( "#myControlId" ).hide();
both lines are working fine for me to hide my views, also when I need to show my views following both lines are working well for me
两条线都可以很好地隐藏我的视图，当我需要显示我的视图时，两条线对我来说都很好用
$( "#myControlId" ).fadeIn();
$( "#myControlId" ).show();
Just want to know technical Difference between them that when I need to use which function for specific need.
只是想知道它们之间的技术区别，当我需要使用哪个功能来满足特定需求时。
回答by Ali Sheikhpour
.fadeIn(duration)and.fadeOut(duration)animate the opacity in a duration. During the fading animation the place of element is fully occupiedhowever at the end of.fadeOut()the place will be removed at once..show(duration)and.hide(duration)animate the size of element (also the opacity) to 100% and 0% and the place of elements is also animatedin that duration.Similarity:The element would disappear immediately in both
.hide()and.fadeOut()when duration=0 and would appear immediately in.show()and.fadeIn()when duration=0.
.fadeIn(duration)并.fadeOut(duration)在一段时间内为不透明度设置动画。在淡入淡出动画期间，元素的位置已被完全占用，但是在.fadeOut()该位置的末尾将立即删除。.show(duration)并将.hide(duration)元素的大小（也是不透明度）设置为 100% 和 0%，并且元素的位置也在该持续时间内设置动画。相似性：该元素将立即消失在两个
.hide()和.fadeOut()当持续时间= 0，并会立即出现在.show()和.fadeIn()当持续时间= 0。
Run this snippet to check the difference and similarities:
运行此代码段以检查差异和相似之处：
$(document).ready(function(){
$("#fadeOut1000").click(function(){
$("#rectangle").stop().fadeOut(1000);
})
$("#fadeOut0").click(function(){
$("#rectangle").stop().fadeOut(0);
})
$("#hide1000").click(function(){
$("#rectangle").stop().hide(1000);
})
$("#hide0").click(function(){
$("#rectangle").stop().hide(0);
})
$("#fadeIn1000").click(function(){
$("#rectangle").stop().fadeIn(1000);
})
$("#fadeIn0").click(function(){
$("#rectangle").stop().fadeIn(0);
})
$("#show1000").click(function(){
$("#rectangle").stop().show(1000);
})
$("#show0").click(function(){
$("#rectangle").stop().show(0);
})
})#placeholder{
width:300px;
height:100px;
border:0px solid #666666;
margin:auto;
margin-top:10px;
}
#rectangle{
width:300px;
height:100px;
background:#ff0000;
}
a{
display:inline-block;
margin:5px;
border-radius:5px;
border:1px solid #aaaaaa;
padding:5px;
cursor:pointer;
width:90px;
font-size:9pt;
font-family:tahoma;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<a id="fadeOut1000">fadeOut(1000)</a>
<a id="fadeOut0">fadeOut(0)</a>
<a id="hide1000">hide(1000)</a>
<a id="hide0">hide(0)</a>
<br>
<a id="fadeIn1000">fadeIn(1000)</a>
<a id="fadeIn0">fadeIn(0)</a>
<a id="show1000">show(1000)</a>
<a id="show0">show(0)</a>
<div id="placeholder">
<div id="rectangle"></div>
</div>
</div>回答by Dark Matter
Both show(), fadeIn()and hide(), fadeOut()work similarly.
The following table shows the difference between them on the basis of css property.
下表显示了它们之间基于 css 属性的区别。
| Opacity | Display | Width/Height |
For show(), hide()
对于显示（），隐藏（）
|Changes |Changes |Changes |
For fadeIn(), fadeOut()
对于淡入（），淡出（）
|Changes |Changes |Doesn't change|
Here is a demo code you can check for better understanding:
这是一个演示代码，您可以检查以更好地理解：
HTML
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JQuery</title>
<script src="../scripts/jquery-3.2.1.min.js"></script>
<script src="../scripts/myscript.js"></script>
</head>
<body>
<p>Hey</p>
<button>Click me!</button>
<p></p>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
SCRIPT(myscript.js)
脚本（myscript.js）
$(document).ready(function () {
$('button').click(function () {
$("#div1").show(10000);
$("#div2").fadeIn(10000);
});
});
回答by Paul Leclerc
An important point that can be add to this actions differences is that hide()/show() saved the inital display value. If your element had a display:inline before been display:none because of a hide() then it whould be inline again.
可以添加到此操作差异的重要一点是 hide()/show() 保存了初始显示值。如果您的元素在 display:none 之前有 display:inline 因为 hide() 那么它应该再次内联。
It's in the doc:)
它在文档中:)
The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.
匹配的元素将立即隐藏，没有动画。这大致相当于调用 .css( "display", "none" )，只是 display 属性的值保存在 jQuery 的数据缓存中，以便稍后可以将 display 恢复到其初始值。如果一个元素的显示值为 inline 并且隐藏然后显示，它将再次内联显示。
