Post
Ask Question

Overview Of jQuery UI Effects

In this article, we will learn jQueryUI. This is the third part of this article series of jQueryUI. In this part, we will learn about jQuery UI Effects. UI stands for User interface and it's used for creating user-interactive applications using jQuery and HTML.

Prerequisites

Basic Knowledge of,

  • HTML
  • JavaScript
  • Css

In this part, we are going to learn about jQuery Effects

  1. Hide()
  2. Show()
  3. Add class
  4. Remove class

Hide/show

The jQuery hide and show method are used in hiding and showing an element. This method is used to create visual effects.

Open Visual Studio and create a new project -- rename it as jQuery and download the required jQuery reference file from the jQuery Website or NuGet package manager and add the reference of the jQuery file into the page's head section,

  1. <script src="Scripts/jquery-1.10.2.js"></script>  
  2. <script src="Scripts/jquery-ui.js"></script>  
  3. <link href="Scripts/jquery-ui.css" rel="stylesheet" />   
Add a div and two buttons in the body section of our page,
  1. <div id="Mdiv" style="height:110px;width:190px;border:2px solid red">jQuery Hide and Show Effect</div>  
  2. <button id="btnhide">Hide</button>  
  3. <button id="btnshow">Show</button>  
Now, add the following code in script tag in head section,
  1. <script>  
  2.     $(document).ready(function() {  
  3.         $("#btnhide").click(function() {  
  4.             $("#Mdiv").hide();  
  5.         });  
  6.         $("#btnshow").click(function() {  
  7.             $("#Mdiv").show();  
  8.         });  
  9.     });  
  10. </script>   
Complete Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <script src="Scripts/jquery-1.10.2.js"></script>  
  7.     <script src="Scripts/jquery-ui.js"></script>  
  8.     <link href="Scripts/jquery-ui.css" rel="stylesheet" />  
  9.     <meta charset="utf-8" />  
  10.     <script>  
  11.         $(document).ready(function() {  
  12.             $("#btnhide").click(function() {  
  13.                 $("#Mdiv").hide();  
  14.             });  
  15.             $("#btnshow").click(function() {  
  16.                 $("#Mdiv").show();  
  17.             });  
  18.         });  
  19.     </script>  
  20. </head>  
  21.   
  22. <body>  
  23.     <div id="Mdiv" style="height:110px;width:190px;border:2px solid red">jQuery Hide and Show Effect</div>  
  24.     <button id="btnhide">Hide</button>  
  25.     <button id="btnshow">Show</button>  
  26. </body>  
  27.   
  28. </html>   
Now run the project and check the Result,
 
jQuery UI Effects 
 
Click on the Hide and show button and check the Effects.

Addclass/Removeclass

By using these method we can add or remove css class from selected elements.
 
Add a div and two buttons in the body section of our page
  1. <div id="Mdiv">jQuery Hide and Show Effect</div>  
  2. <button id="btnadd">Add Css</button>  
  3. <button id="btnremove">Remove Css </button>  
Now add the following code in style tag in head section,
  1. <style>  
  2.     .maincss {  
  3.         color: red;  
  4.         background-color: yellow;  
  5.         font-size: 24px;  
  6.     }  
  7. </style>   
Now add the following code in script tag in head section.
  1. <script>  
  2.     $(document).ready(function() {  
  3.         $("#btnadd").click(function() {  
  4.             $("#Mdiv").addClass("maincss");  
  5.         });  
  6.         $("#btnremove").click(function() {  
  7.             $("#Mdiv").removeClass("maincss")  
  8.         });  
  9.     });  
  10. </script>  
Complete code.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <script src="Scripts/jquery-1.10.2.js"></script>  
  7.     <script src="Scripts/jquery-ui.js"></script>  
  8.     <link href="Scripts/jquery-ui.css" rel="stylesheet" />  
  9.     <meta charset="utf-8" />  
  10.     <style>  
  11.         .maincss {  
  12.             color: red;  
  13.             background-color: yellow;  
  14.             font-size: 24px;  
  15.         }  
  16.     </style>  
  17.     <script>  
  18.         $(document).ready(function() {  
  19.             $("#btnadd").click(function() {  
  20.                 $("#Mdiv").addClass("maincss");  
  21.             });  
  22.             $("#btnremove").click(function() {  
  23.                 $("#Mdiv").removeClass("maincss")  
  24.             });  
  25.         });  
  26.     </script>  
  27. </head>  
  28.   
  29. <body>  
  30.     <div id="Mdiv">jQuery Hide and Show Effect</div>  
  31.     <button id="btnadd">Add Css</button>  
  32.     <button id="btnremove">Remove Css </button>  
  33. </body>  
  34.   
  35. </html>  
Run the project and check the Result,
 
jQuery UI Effects 
 
Click on the Add CSS class Button,
 
jQuery UI Effects 
 
Click on remove CSS button and check.

Summary

In this article we learned about jQuery Hide, show, addclass and removeclass method.  In the next article, we will learn about the fade effect in jQuery.
Next Recommended Reading Create Year Picker Widget From jQuery-UI Date Picker