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