Post
Ask Question

jQuery Effects

jQuery is a JavaScript library which helps make interactive webpages.
 
If you are completely new to jQuery, then please refer to:
  1. jQuery Library
  2. jQuery Syntax
  3. jQuery Events
Adding effects and animations to the webpage was a difficult task earlier. But, with the help of jQuery, we can add effects very easily. Effects help us make the webpage more interactive and beautiful. They also help us increase the quality of UX, if used at the appropriate place and appropriate time.

There are several jQuery effects. In this article, we will be starting with the hide, show, and toggle effect of jQuery. As the name suggests, hide effect helps us to hide some components, show allows us to show some components, and toggle allows us to toggle between hide and show.

Now, please write the following code in your editor and see the output.
 
  1. <html>  
  2. <head>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  4. </head>  
  5.   
  6. <body>  
  7.   
  8. <h2>Click on any button</h2>  
  9. <button id="hide">Hide</button>  
  10. <button id="show">Show</button>  
  11. <button id="toggle">Toggle</button>  
  12.   
  13. <br><br>  
  14.   
  15. <div class="myDiv">  
  16. This will be affected.  
  17. </div>  
  18.   
  19. <p>This will not have any effect on any button click, as it is outside myDiv and the effects are applied to class myDiv which is assigned to div  
  20. </p>  
  21. <script>  
  22. $(document).ready(function(){  
  23. $("#hide").click(function(){  
  24. $(".myDiv").hide();  
  25. });  
  26. $("#show").click(function(){  
  27. $(".myDiv").show();  
  28. });  
  29. $("#toggle").click(function(){  
  30. $(".myDiv").toggle();  
  31. });  
  32. });  
  33. </script>  
  34. </body>  
  35. </html>  
 
The output should look like this:
 
 
Now, click on Hide button. The line "This will be affected" will be hidden. Then, click the show button. It will come back. And finally, click toggle. When you click toggle, if the line is visible, it will hide and if it is hidden, then it will show up.

Code Explained:

We are making a simple HTML page. Firstly, include jQuery. Then, there are three buttons - Hide, Show and Toggle. Following this, we have divisions with class "myDiv". And, finally we have a paragraph after the division myDiv.

In the script, we select the button using its id. So, as you can see, $("#hide") will select hide button. Then, we are using click event handler and defining a function in it. Inside the function, we are selecting myDiv using $(".myDiv") and adding hide effect to it, using the hide() method. Similarly, we are implementing the function for show and toggle buttons, by adding show() and toggle() methods to the respective functions.
 
We can also specify the speed with which the transition occurs. We need to specify the speed as parameter in the methods.
 
Example:
  1. $("div").hide("slow");  
This will hide the division slowly.
  1. $("div").show("fast");  
This will show the division in fast speed.
  1. $("div").toggle("1000");  
This will trigger the toggle effect in 1000 milliseconds.

So, we can use slow, fast, and milliseconds, to specify the speed with which the effect occurs. This was a small overview of hide, show, and toggle effects in jQuery. In the next article, we will learn about the other effects, like animate, slide, fade, etc.

Stay tuned. Happy Learning!
Next Recommended Reading Blink Effect With JQuery