In jQuery, both .fadeOut() and .hide() are used to make elements disappear from the web page, but they differ in how they accomplish this and in the visual effect they provide.
.hide()
The .hide() function in jQuery immediately hides an element by setting its display property to none. This action is instant and does not provide any animation effect.
Examples:
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Hide Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body> output after run
<div id="box1" style="width:200px; height:200px; background-color:blue;"></div>
<br>
<button id="hideButton"><a href="https://fsiblog.io/" target="_blank">Visit Fsiblog.io</a>
</button>
<script>
$(document).ready(function(){
$('#hideButton').click(function(){
$('#box1').hide(); // Hides the box instantly
});
});
</script>
</body>
</html>
OneCompiler’s HTML online compiler helps you to write, compile, run and view HTML code
When the button is clicked, #box1 will instantly disappear from the screen without any transition effect.
.fadeOut()
The .fadeOut() function, on the other hand, gradually decreases the opacity of an element to make it disappear. This method provides a fade-out animation effect, making the element vanish smoothly.
Examples:
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery fadeOut Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box2" style="width:200px; height:200px; background-color:green;"> Fsiblog.io Example </div>
<button id="fadeOutButton">Fade Out Box 2</button>
<script>
$(document).ready(function(){
$('#fadeOutButton').click(function(){
$('#box2').fadeOut(1000); // Fades out the box over 1 second (1000 milliseconds)
});
});
</script>
</body>
</html>
OneCompiler’s HTML online compiler helps you to write, compile, run and view HTML code
In this example, when the button is clicked, #box2 will gradually disappear over one second due to the fading animation.
Summary of Differences:
| Feature | .hide() | .fadeOut() |
|---|---|---|
| Effect | Immediate disappearance | Gradual fading effect |
| Animation | No animation | Fading animation until element is gone |
| Usage | Sets display: none instantly | Changes opacity until display: none |
| Duration | Instant (no duration option) | Adjustable duration (e.g., fadeOut(1000)) |
Choosing Between .hide() and .fadeOut()
- Use
.hide()when you need to hide elements immediately without any transition. - Use
.fadeOut()for a smoother, gradual transition, which can be visually appealing in interactive UIs.
Both methods are commonly used for toggling visibility in dynamic web applications, so the choice depends on the desired visual effect and user experience.