JQuery Difference between hide() and fadeOut() , show() and fadeIn()
.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>
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);
});
});