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:

  1. duration  -It specifies the speed of the show effect. Default value is 400 milliseconds. Possible values:

    • milliseconds
    • slow
    • fast
  2. 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
  3. 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

jquery hide

Now click on the hide Paragraphs Content to hide paragraph.

jquery hide

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

jquery hide function

When you click on the hide button, it hides the paragraph show the hide paragraph with speed duration.

jquery hide function
Prev Next