The jQuery hide() method is used to hide the selected elements.
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Try it Yourself - Copy paste code in Online HTML Editor to see the result
Syntax
$(selector).hide();
$(selector).hide(speed, callback);
$(selector).hide(speed, easing, callback);
- speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.
- easing: It specifies the easing function to be used for transition.
- callback: It is also an optional parameter. It specifies the function to be called after completion of hide() effect.
Example 1
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function() {
$("p").hide();
});
$("a").click(function(event) {
event.preventDefault();
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<a href="#">Click to hide me too</a>
<button id="hide">Hide</button>
</body>
</html>
Example 2
Animates all shown paragraphs to hide slowly, completing the animation within 600 milliseconds.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
p {
background: #dad;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<button>Hide</button>
<p>Source code examples</p>
<p>jquery examples</p>
<script>
$("button").click(function() {
$("p").hide("slow");
});
</script>
</body>
</html>
Comments
Post a Comment