jQuery hide()和fadeOut()，show()和fadeIn()之间的区别

问题描述

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

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.

 $( "#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.

推荐答案

• .fadeIn(duration)和.fadeOut(duration)设置百分比动画持续时间的不透明度.在淡入淡出动画期间，元素的位置已被完全占用，但是在.fadeOut()的末尾，该位置将被立即删除.

  • .fadeIn(duration) and .fadeOut(duration) animate the percentageof opacity in a duration. During the fading animation the place of element is fully occupied however at the end of .fadeOut() the place will be removed at once.

    .show(duration)和.hide(duration)将元素的大小(以及不透明度)设置为100％和0％的动画，并且元素的位置在该持续时间内也被设置为动画.

    .show(duration) and .hide(duration) animate the size of element (also the opacity) to 100% and 0% and the place of elements is also animated in that duration.

    相似性:该元素将在.hide()和当持续时间= 0时.fadeOut()，当持续时间= 0时将立即出现在.show()和.fadeIn()中.

    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.

    运行以下代码段以检查差异和相似之处:

    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>

    这篇关于jQuery hide()和fadeOut()，show()和fadeIn()之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！