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

Question

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.

Answer 1

• .fadeIn(duration) and .fadeOut(duration) animate the 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) 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.

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