JQuery hide() 和 fadeOut() 、 show() 和 fadeIn() 之间的区别

Question

我是 jQuery 的新手。目前，我正在我的一个跨平台移动应用程序中使用 jQuery。我需要在各自的条件下隐藏和显示我的一些页面内容。我发现以下两种方法对我来说效果很好。

 $( "#myControlId" ).fadeOut();
 $( "#myControlId" ).hide();

两条线都可以很好地隐藏我的观点，当我需要显示我的观点时，两条线对我来说都很好

 $( "#myControlId" ).fadeIn();
 $( "#myControlId" ).show();

只是想知道它们之间的技术差异，当我需要使用哪个功能以满足特定需求时。

Answer 1

.fadeIn(duration) 和 .fadeOut(duration) 在持续时间内设置不透明度动画。在淡出动画期间元素的位置被完全占据但是在.fadeOut()结束时该位置将被立即移除
.show(duration) 和 .hide(duration) 将元素的大小（以及不透明度）设置为 100% 和 0% 并且 元素的位置也设置了动画 在那段时间内。
相似性：元素在.hide()和.hide()中都会立即消失 .fadeOut() 当 duration=0 时会立即出现在 .show() 和 .fadeIn() 时当 duration=0.

运行这段代码检查异同：

$(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{
    display:inline-block;
    padding:10px;
    border:1px dashed #bbbbbb;
    margin:auto;
    margin-top:10px;
    }
#rectangle{
    width:300px;
    height:80px;
    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>
  <br>
  <div id="placeholder">
    <div id="rectangle"></div>
  </div>
</div>

Answer 2

可以添加到此操作差异中的重要一点是 hide()/show() 保存了初始显示值。如果你的元素有一个 display:inline 之前是 display:none 因为 hide() 那么它应该再次内联。

它在 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.

Answer 3

两者 show(), fadeIn() and hide(), fadeOut() 的工作方式相似。

The following table shows the difference between them on the basis of css property.

                     | Opacity | Display | Width/Height |

对于显示()、隐藏()

                     |Changes  |Changes  |Changes       |

对于 fadeIn()、fadeOut()

                     |Changes  |Changes  |Doesn't change|

这是一个演示代码，您可以查看它以更好地理解：

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>

脚本 (myscript.js)

$(document).ready(function () {
    $('button').click(function () {
        $("#div1").show(10000);
        $("#div2").fadeIn(10000);
    });
});

Answer 4

上面已经有很多答案了，但是我想没有人说清楚。

FadeIn、FadeOut 与 hide、Show 之间的主要区别是，当您使用 FadeIn 和 fadeout 时，它会慢慢移除线，就像 Opacity 会在几毫秒内从 100 变为 0，但另一方面，hide、Show 会立即移除线不浪费任何一毫秒。

运行这段代码你很容易看懂:

$(文档).ready(函数(){ $(".btn1").点击(函数(){ $("p").fadeOut(); }); $(".btn2").点击(函数(){ $("p").fadeIn(); }); $(".btn3").点击(函数(){ $("p").show(); }); $(".btn4").click(函数(){ $("p").隐藏(); }); });

<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<button class="btn3">show</button>
<button class="btn4">Hide</button>

JQuery hide() 和 fadeOut() 、 show() 和 fadeIn() 之间的区别

JQuery Difference between hide() and fadeOut() , show() and fadeIn()

jquery

show

hide

fadeout

fadein