jQuery Api Show() & Hide() Animation Example

Effect Show() / Hide() By jQuery – how to use this effects with html elements or webpages. We are going to show you with simple example how to use this effects. Here you will learn how to show hide HTML elements using jQuery effects.

You can show and hide HTML elements using the jQuery show() and hide() effect methods.

jQuery Show Effect

The jQuery show() effect method is used to show the selected Html elements.

Syntax

 $(selector).show();  
$(selector).show(speed, callback);
$(selector).show(speed, easing, callback);

Parameters of Show Method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- This is an optional parameter. you can specify what to do after the hide() method is called.

jQuery show() example

In the below example you can see that show() effect method.

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
$(".btn-show").click(function(){
  $("#first").show();
  });
});
</script>
</head>
<body>

<h4 id="first" style="display: none"> Hide and Show - Speed</h4>
<button class="btn-show">Show</button>

</body>
</html>

jQuery show and callback example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
$(".btn-show").click(function(){
    $("#first").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>

<h4 id="first" style="display: none"> Hide and Show - Speed</h4>
<button class="btn-show">Show</button>

</body>
</html>

jQuery Hide Effect

The jQuery hide() effect method is used to hide the selected Html elements.

Syntax

 $(selector).hide();  
$(selector).hide(speed, callback);
$(selector).hide(speed, easing, callback);

Parameters of Hide() Method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the hide() method is called.

jQuery Hide() example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Hide Method </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
  $(".btn-hide").click(function(){
  $("#first_hide").hide("fast");
  });

$(".btn-show").click(function(){
  $("#first_hide").show("fast");
  });
});
</script>
</head>
<body>

<h4 id="first_hide"> Hide and Show - Speed</h4>
<button class="btn-hide">Hide</button>
<button class="btn-show">Show</button>

</body>
</html>

jQuery hide and callback example

<!DOCTYPE html>
<html>
<head>
<title> jQuery Show &amp; Hide with callback</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>
$(document).ready(function(){
  $(".btn-hide").click(function(){
    $("#second").hide(1000,"swing",function(){
      alert("Hide() method is finished!");
    });
  });
$(".btn-show").click(function(){
    $("#second").show(1000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>

<h4 id="second"> Hide and Show - Speed</h4>
<button class="btn-hide">Hide</button>
<button class="btn-show">Show</button>

</body>
</html>

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *