Post
Ask Question

jQuery UI Demystified: Part 3

Introduction

 
Before reading this article, please go through the following articles: 
In this article, we will learn about jQuery effects.The following effects will be covered.
  1. Add Class
  2. Color Animation
  3. Effect
  4. Hide
  5. Remove Class
  6. Show
  7. Switch Class
  8. Toggle
  9. Toggle Class
In my Part 1 article we learned how to add a jQuery Widget on a HTML element. In Part 2 we learned how to add jQuery Interactions on HTML elements. Now in this part, we will complete this jQuery Demystified series. jQuery effects are very important for making a good website design. It gives your site a smooth transition and a pleasant appeal. So what are we waiting for? Let's Dive In! 
 

Quick Synopsis of Part 2

 
In Part 2 we cover the jQuery interactions. We covered the following effects:
 
Capture.PNG
 
Let's move ahead now on jQuery effects.
 
Preparing the workspace
  • Add the following code in your new HTML to make it ready for the rest of the article. 
    1. <html>  
    2. <head>  
    3.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />  
    4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
    5.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>  
    6.     <meta charset="utf-8" />  
    7.     <title>jQuery Demystified Part 3</title>  
    8.       <style>  
    9.         /* we will use this section for adding css classes */  
    10.     </style>  
    11.  </head>  
    12. <body>  
    13.       <script>  
    14.         $(document).ready(function () {  
    15.             // We will use this for adding our jQuery  
    16.         });  
    17.     </script>  
    18. </body>  
    19. </html> 

Working with jQuery Effects

 
Add Class
  • Add this peice of code in the html section:
    1. <div class='addcls'></div>  
  • Add these two classes in your style section:
    1. .addcls{  
    2.   width:50px;  
    3.   height:20px;  
    4.   background-color:orange;  
    5. }  
    6. .addclsOP{  
    7.   width:300px;  
    8.   height:80px;  
    9.   background-color:blue;  
    10. } 
    Here 'addcls' is the default class and we will change it to 'addclsOP'.
     
  • Add this in your script section:
    1. $(document).ready(function () {  
    2.     $(".addcls").click(function () {  
    3.         $(this).addClass("addclsOP", 1000, "easeOutBounce");  
    4.     });  
    5. }); 
Here we add the "addclsOP" in the div when the user clicks on it. This changes the property of the element on which the click is performed. ".addClass" has syntax like this:
 
".addClass("class_to_add",duration,other_options)".
 
a4p1.jpg
 
Remove Class
  • Append this in your HTML section:
    1. <div class="addclsOP addcls"></div> 
    This div has two classes "addclsOP" and "addcls". We'll remove the addclsOP on the click of the user on the second div.
     
  • Append this code to your script section:
    1. $( ".addclsOP" ).click(function() {  
    2.     $( this ).removeClass( "addclsOP", 3000, "easeOutBounce" ); 
Here the class addclsOP is removed from the div when the user clicks on that div. The general syntax of ".removeClass" is
 
".removeClass("class_to_remove",duration,other_options)".
 
a4p2.jpg
 

Animate

  • Append this in your HTML section:
    1. <div class='clrAnim'>Color Animation</div> 
    This div will be used to animate its color and size when the user clicks on it.
     
  • Append this class in your style section:
    1. .clrAnim{  
    2.   width:300px;  
    3.   height:80px;  
    4.   background-color:pink;   
    5. } 
    This is the default class on the div and its content will be changed using the ".animate" method.
     
  • Now append this script in your script section:
    1. $(".clrAnim").click(function () {  
    2.     $(this).animate({  
    3.         color: "white",  
    4.         backgroundColor: "black",  
    5.         height: "160px"  
    6.     }, 1000);  
    7. }); 
    The syntax for ".animate" is: ".animates("options_to_animate",duration,other_options)".
     
a4p3.jpg
 

Effect

  • Append this HTML snippet in your HTML:
    1. <div class='effectDemo'>effect Demo</div> 
    On this div, we will be performing various effects.
     
  • Append this class in your Style section.
    1. .effectDemo{  
    2.   width:300px;  
    3.   height:80px;  
    4.   background-color:brown;   
    5. } 
  • Append this code in your script section
    1. $(".effectDemo").click(function () {  
    2.     $(this).effect("explode", 2000, "easeOutBounce");  
    3. }); 
Here we are performing the "explode" effect on the div when the user clicks on it. We have various kinds of effects, like blind, fold, slide, pulsate and so on. The general syntax is  .effect("Effect_name",duration,other_options).
 
a4p4.jpg
 

Hide

  • Append this snippet in your HTML
    1. <div class='hidecls'>Hide Demo</div> 
    We will hide this div when the user clicks on it.
     
  • Append this class in your Style section:
    1. .hidecls{  
    2.   width:300px;  
    3.   height:80px;  
    4.   background-color:yellow;   
    5. } 
  • Append this code in your script section:
    1. $(".hidecls").click(function () {  
    2.     $(this).effect( 2000);  
    3. }); 
Here we are performing the "Hide" effect on the div when the user clicks on it. The general syntax is  ".hide(["Effect_name"],[options],[duration],[callback])." Everything that is in [] is optional, so simply ".hide()" will also work.
 
a4p5.jpg
 

Switch Class

  • Append this snippet in your HTML
    1. <div class="switchDemo">Switch CLass Demo</div> 
    On this div, we will perform various effects.
     
  • Append this class in your Style section:
    1. .switchDemo{  
    2.   width:300px;  
    3.   height:80px;  
    4.   background-color:olive;   
    5. }  
  • Append this code to your script section:
    1. $(".switchDemo").click(function () {  
    2.      
    3. $(this).switchClass("switchDemo", "clrAnim", 3000, "easeOutBounce");  
    4. }); 
Here we are performin the "switchClass" effect on the div when the user clicks on it. The general syntax is  ".switchClass("Current_class","New_class",[duration],[callback])". The callback event occurs when the switching is completed.
 
a4p6.jpg
 

Toggle Class

  • Append this snippet to your HTML:
    1. <div id="tc" class="td">Toggle demo</div> 
    On this div, we will be performing the Toggle class effect between the "td" class and "td2" class.
     
  • Append this class in your Style section:
    1. .td{  
    2.   width:300px;  
    3.   height:80px;  
    4.   background-color:green;   
    5. }  
    6. .td2{  
    7.   width:300px;  
    8.   height:160px;  
    9.   background-color:black;   
    10. } 
          These two classes will be switched on click of the user.
  • Append this code in your script section
    1. $( "#tc" ).click(function() {  
    2.     $( this).toggleClass( "td2",1000);  
    3. }); 
Here we are performing the "toggleClass" effect on the div when the user clicks on it. The general syntax is  ".toggleClass("Class_to_switch_with",[duration],[easing_type],[callback])." The class will be added on the div if it's not present and if it's present then it will be removed.
 
a4p7.jpg
 

Toggle

  • Append this snippet to your HTML:
    1. <div id="container">  
    2. <div id="slider">Toggle demo</div>  
    3. </div> 
    On this div, we will be adding a sliding effect using the toggle.
     
  • Append this class in your Style section.
    1. #slider{  
    2.     width: 180px;  
    3.     height: 100px;  
    4.     background: #ccc;  
    5. }  
    6. #container{  
    7.   height:100px;  
    8. } 
         These two classes are the design of our slider.
  • Append this code in your script section
    1. $("#container").click(function () {  
    2.     $("#slider").toggle("slide", { direction: "left" }, 1000);  
    3. }); 
Here we are performing the "toggle" effect on the div when the user clicks on it. It looks like a slider. The general syntax is  ".toggle("effect_name",[options],[duration],[callback])".
 
a4p8.jpg
 

Summary

 
So in this article, we learned about jQuery effects and how to use them. We saw various effects that can be used to create various useful anim effects on a website. Now the jQuery is completed. It is demystified now. Your foundation is made, now you can start using it on your website and make it more attractive. If you are stuck somewhere then don't worry, the C#-forums are there. You can also have a look at jQuery UI API to check out the various options available for widgets. 
 
Final output
 
a4p9.PNG
 
Don't forget to comment. :) 


Similar Articles