jQuery Show
jQuery Show() Method
The show() is an inbuilt method in jQuery used to show the selected element.
Syntax
$(selector).show(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 show() method is completed.
Here, is an example how to show 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();
});
$("#btnshowid").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<button id="btnhideid" type="button" style="background-color:red">Hide Paragraphs
Content</button>
<button id="btnshowid" type="button" style="background-color:green">Show Paragraphs
Content</button>
<p>This is a paragraph to be hide and show.</p>
<p>This is another paragraph to be hide and show.</p>
</body>
</html>Output
Now click on the hide Paragraphs Content to hide paragraph.
Now clock on show botton to show again 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").show();
$("btnhideid").show("fast");
$("pbtnhideid").show("slow");
$("btnhideid").show(50);
$("btnhideid").show(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!");
});
});
$(".btn-show").click(function ()
{
$("p").show(1000, function () {
alert("show() 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>
<button class="btn-show">Click to show</button>
</body>
</html>Output
When you click on the hide button, it hides the paragraph and show button again show the hide paragraph with speed duration.
Prev Next