JQuery Effects Hide and Show Example

JQuery effects are used to adding some effects on the web pages. Such effects are hiding, showing, sliding, fading and animation. Here we are going to do some interesting JQuery effects examples;

JQuery Effects Hide and Show:

The JQuery hide() method is used to hide the selected elements on the web page. And vice-versa the show() method is used to show the selected elements on the web page.

$(selector).hide()
$(selector).hide(speed, [callback]);

$(selector).show()
$(selector).show(speed, [callback]);

On the above, we can see the possible syntax for hide and show methods.The both two hide and show methods are having two syntaxes; with parameters and with out parameters.

JQuery hide() show() Example :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery dblclick Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
   $(document).ready(function() {
       $(".btn").click(function() {
           $("p").hide();
       });
       $(".btn2").click(function() {
           $("p").show();
       });
   });
</script>
<body>
   <p>Sample Jquery Effects Hide/show</p>
   <button class="btn">Hide</button>
   <button class="btn2">Show</button>
</body>
</html>
[/html]

The above example is used to hide and show the <p> tag in HTML. We can also define the speed of showing and hiding the effect.

The parameter speed represents three speeds to run the animation to show. They are, FAST, NORMAL and SLOW. The callback parameter is optional. That represent the execution of function after animation completes. It executes only once for each element on a web page.

JQuery Effect toggle() :

Toggle is a method in JQuery used to toggle between the display of elements and the hidden elements. Initially the element is displayed then the element will be hide and vice versa.

Toggle is a single event, can be applied on a single component at a time, where as hide() and show() are two event functionalities which can apply two components at a time.

$(selector).toggle([speed] [, callback]);

The parameter speed represents three speeds to run the animation to show. They are FAST, NORMAL and ALOW. The callback parameter is optional. That represent the execution of function after animation completes. It executes only once for each element on a web page.

JQuery Effect toggle() Example :

[html]

<!DOCTYPE html>
<html>
<head>
<script
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $(document).ready(function() {
       $("button").click(function() {
           $("p").toggle();
       });
   });
</script>
</head>
<body>
   <p>I am showing, please hide me..</p>
   <button>Toggle..</button>
</body>
</html>

[/html]

From this tutorial, we can come to know that we can implement the JQuery Effects using hide() and show() methods and also toggle() method.

Happy Learning 🙂