Animations using jQuery

animation-jquery-css
animation-jquery-css

The jQuery animate() method is used to create custom animations.

Syntax:

$(selector).animate({params},speed,callback);

params :- defines the CSS properties to be animated.
speed :- specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.
callback :- function to be executed after the animation completes.

animation Jquery

Example:

$(“button”).click(function(){
     $(“span”).animate({
        left: ‘250px’,
       opacity: ‘0.5’
    });
});

Using Relative Values

It is also possible to define relative values (the value is then relative to the element’s current value). This is done by putting += or -= in front of the value :

$(“button”).click(function(){
     $(“span”).animate({
        left: ‘250px’,
        height: ‘+=150px’
     });
});

Uses Queue Functionality

jQuery comes with queue functionality for animations.Which means that multiple animate() calls after each other, jQuery creates an “internal” queue with these method calls. Then it runs the animate calls ONE by ONE.

So, if you want to perform different animations after each other, we take advantage of the queue functionality:

$(“button”).click(function(){
       var span = $(“span”);
       span.animate({height: ‘300px’, opacity: ‘0.4’}, “slow”);
       span.animate({width: ‘300px’, opacity: ‘0.8’}, “slow”);
       span.animate({height: ‘100px’, opacity: ‘0.4’}, “slow”);
       span.animate({width: ‘100px’, opacity: ‘0.8’}, “slow”);
});

A sample example of using jQuery animation:

http://animation-jquery-css.bitballoon.com/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s