19

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.

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
Salman Nazir
  • 2,759
  • 2
  • 28
  • 42
  • 1
    [`.show()`](http://api.jquery.com/show/) / [`.hide()`](http://api.jquery.com/hide/), [`.fadeIn()`](http://api.jquery.com/fadeIn/) / [`.fadeOut()`](http://api.jquery.com/fadeOut/) – Andreas Nov 29 '15 at 12:08

4 Answers4

38

  • .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: For duration=0 the element disappears immediately in both .hide(0) and .fadeOut(0) and appears immediately in .show(0) and .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{
    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>
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • 2
    I don't want to make an answer for this but you should also be aware of some changes with the new version of jQuery https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ – Donnie D'Amato Nov 29 '15 at 15:44
11

Both show(), fadeIn() and hide(), fadeOut() work similarly.

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

                     | 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

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

$(document).ready(function () {
    $('button').click(function () {
        $("#div1").show(10000);
        $("#div2").fadeIn(10000);
    });
});
Indranil
  • 2,229
  • 2
  • 27
  • 40
0

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.

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.

Paul Leclerc
  • 1,117
  • 1
  • 14
  • 18
0

There is many Answer is already have above But i think no one make this clear.

Main difference between FadeIn, FadeOut vs hide, Show is When you use FadeIn and fadeout Its remove line Slowly Like Opacity will 100 to 0 in a few mili-second but On other hand hide, Show will remove the line immediately Without wasting any mili-second.

Run This code you can understand easily :

$(document).ready(function(){ $(".btn1").click(function(){ $("p").fadeOut(); }); $(".btn2").click(function(){ $("p").fadeIn(); }); $(".btn3").click(function(){ $("p").show(); }); $(".btn4").click(function(){ $("p").hide(); }); }); 
<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>
Nipun Agarwal
  • 21
  • 2