jQuery UI Demystified: Part 3

Introduction

Before reading this article, please go through the following articles:

Part 1: jQuery UI Demystified: Part 1
Part 2: jQuery UI Demystified: Part 2

In this article, we will learn about jQuery effects.The following effects will be covered.

Add Class
Color Animation
Effect
Hide
Remove Class
Show
Switch Class
Toggle
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:

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)".

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)".

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)".

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).

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.

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 () {
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.

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.

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])".

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

Don't forget to comment. :)