How To Work With jQuery UI Effects

How to work with JQuery UI Effects

In this post I have explained how to work with jQuery effect using jQuery UI plugin. You can see all the tricks that we can do to manipulate HTML using jQuery UI effects. You can refer my article on jQuery UI interactions and UI Widgets to get more understanding.

Effects

• Color animation
• Toggle Class, Add Class, Remove Class, Switch Class
• Show, Hide
• Easing
• Effects

Color animation:

JQuery Color plugins are used to provides color animation functions for working with colors such as backgroundColor , borderLeftColor, borderRightColor, borderTopColor, borderBottomColor, Color, OutLineColor, etc.

Syntax 

$("#selector").animate({
    backgroundColor: "black",
    color: "Red"
});

Example: In this example we are showing the color animation effects through a click of button. You can use the following code.

$(function() {
    var state = true;
    $("#button").click(function() {
        if (state) {
            $("#effect").animate({
                backgroundColor: "green",
                color: "#fff",
                width: 500
            }, 1000);
        } else {
            $("#effect").animate({
                backgroundColor: "green",
                color: "#000",
                width: 240
            }, 1000);
        }
        state = !state;
    });
});

Output:

Figure 1: Before animation effects

  Figure 2: After animation effects

Add, Remove, Switch, Toggle class

Add class will be used for adding a new CSS class after replacing the old class and Remove class will work for removing the selected class. Also, the switch class work for switching one class to another class. All the classes add, remove, switch, and toggle are shown below:

JQuery Code: 

$(document).ready(function() {
    $('.button').click(function() {
        if (this.id == "add") {
            $('#animTarget').addClass("myClass", "fast")
        } else if (this.id == "toggle") {
            $('#animTarget').toggleClass("myClass", 1000, "easeOutSine")
        } else if (this.id == "switch") {
            $("#animTarget").switchClass("myClass", "switchclass", "fast")
        } else {
            $('#animTarget').removeClass("myClass", "fast")
        }
    })
});

CSS code:

.elemClass {
  width: 200px;
  height: 50px;
  background-color: #b9cd6d;
  text-align: center;
  font-size: large;
}

.myClass {
  font-size: 70px;
  background-color: #ccc;
  color: white;
  height: 150px;
  width: 170px;
  text-align: center;
}

.switchclass {
  font-size: 50px;
  background-color: #b9cd6d;
  color: blue;
  height: 150px;
  width: 150px;
  text-align: center;
}

Html Code:

<div id="animTarget" class="elemClass">
Hello Mohit!
</div>
<button class="button" id="add">Add Class</button>
<button class="button" id="remove">Remove Class</button>
<button class="button" id="toggle">Toggle Class</button>
<button class="button" id="switch">Switch Class</button>

Output:

Figure 3: Before addClass effects

 Figure 4: After addClass effects

 

Figure 5: After switchClass effects.

Easing

JQuery easing can make your animations look more attractive, but sometimes it's hard to choose which easing type to use. The jQuery easing plugin provides 30 different easing methods. Here are some easing types and their use.

Code:

$(document).ready(function() {
    $('#easing').click(function(event) {
        $(this)
            .animate({
            left: 400
        }, {
            duration: 'slow',
            easing: 'easeOutElastic'
        })
            .animate({
            left: 500
        }, {
            duration: 'slow',
            easing: 'easeOutElastic'
        });
    });
});

Hide: This is the most important method which is used for hiding and showing the elements. You can use this method like the following syntax: 

.hide(effect[, options][, duration][, complete])

.show(effect[, options][, duration][, complete])

Summary

In this article we saw how to use jQuery UI methods and their effects.