Menu
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.
708
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out. Syntax: $(selector).
A fade-in effect begins with a solid color (Movie Maker supports both black and white) and then fades into your video. A fade-out effect begins with the video and then fades into the solid color, again either black or white.
The fadeIn() Method in jQuery is used to change the opacity of selected elements from hidden to visible. The hidden elements will not be display. Syntax: $(selector).fadeIn( speed, easing, callback )
The . fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none , so the element no longer affects the layout of the page. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.
.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{
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);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
