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()和持续时间= 0时.fadeOut()，当持续时间= 0时会立即显示在.show()和.fadeIn()。

运行此代码段以检查差异和相似之处：

＆＃13;

$(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);
  })     

})

＆＃13;

#placeholder{
    width:300px;
    height:100px;
    border:1px 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;
   }

＆＃13;

<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>

＆＃13;

Answer 2

可以添加到此操作差异的一个重点是hide（）/ show（）保存了初始显示值。如果你的元素有一个显示：在显示之前的内联：由于hide（）而没有，那么它应该再次内联。

它在the doc :)

匹配的元素将立即隐藏，无动画。这大致等同于调用.css（＆＃34; display＆＃34;，＆＃34; none＆＃34;），除了显示属性的值保存在jQuery的数据缓存中，以便显示可以以后恢复到初始值。如果元素的显示值为内联并隐藏然后显示，则它将再次以内联方式显示。

隐藏（）和FadeIn（），Show（）和FadeOut（）之间的JQuery区别

2 个答案: