jQuery Hide
jQuery Hide() Method
The Hide() is an inbuilt method in jQuery used to hide the selected element.
Syntax
$(selector).hide(duration, easing, call_function);
Here selector is the selected element. It accepts three parameters which are specified below:
-
duration -It specifies the speed of the show effect. Default value is 400 milliseconds. Possible values:
- milliseconds
- slow
- fast
-
easing - It specifies the speed of the element at different point of animation. Default value is swing. Possible values:
- swing - moves slower at the beginning/end, but faster in the middle
- linear - moves in a constant speed
-
call_function - A function to be executed after the hide() method is completed.
Here, is an example how to hide paragraph on selected id on button click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Show Effects</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btnhideid").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<button id="btnhideid" type="button" style="background-color:red">Hide Paragraphs
Content</button>
<p>This is a paragraph to be hide.</p>
<p>This is another paragraph to be hide.</p>
</body>
</html>Output
Now click on the hide Paragraphs Content to hide paragraph.
Durations can be specified either using one of the predefined string slow or fast or in a number of milliseconds, for greater precision; higher values indicate slower animations.
For Example
$("btnhideid").hide();
$("btnhideid").hide("fast");
$("pbtnhideid").hide("slow");
$("btnhideid").hide(50);
$("btnhideid").hide(2000);
In the below code, parameter is passed to this method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Show Effects</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$(".btn-hide").click(function ()
{
$("p").hide(1000, function () {
alert("hide() method has finished its working!");
});
});
});
});
</script>
<style>
p {
width: 50%;
padding: 30px;
height: 60px;
border: 2px solid green;
}
</style>
</head>
<body>
<p>tutorialstrend.com!</p>
<button class="btn-hide">Click to hide</button>
</body>
</html>Output
When you click on the hide button, it hides the paragraph show the hide paragraph with speed duration.
Prev Next