jQuery Animations

Posted on Updated on

jQuery Animations

The jQuery animate() method lets you create custom animations. jQuery animation is use to make website more interactive and user friendly. Animation generate the animation with the help of animate () function.

jQuery Animations – The animate() Method

The jQuery animate() method is used to create animations and make page interactive .

Syntax:

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

Here we defines the CSS properties to be animated.

The optional speed parameter specifies the duration of the effect. The values may “slow”, “fast”, or milliseconds.

The callback parameter is a function to be executed after the animation completes it is optional.

The following example demonstrates a simple use of the animate() method; it moves a <div> from right to left.

Example

$(“button”).click(function(){

    $(“div”).animate({left: ‘250px’});

});

jQuery animate() – use multiple properties

Example

$(“button”).click(function(){

$(“div”).animate({

        left: ‘250px’,

        opacity: ‘0.5’,

        height: ‘150px’,

        width: ‘150px’

    });

});

jQuery animate() – 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:

Example

$(“button”).click(function(){

    $(“div”).animate({

        left: ‘250px’,

        height: ‘+=150px’,

        width: ‘+=150px’

    });

});

jQuery animate() -Pre-defined Values You can even specify a property’s animation value as “show”, “hide”, or

“toggle”:

Example

$(“button”).click(function(){

    $(“div”).animate({

        height: ‘toggle’

    });

});

jQuery animate() – Queue Functionality

This means that if you write 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:

Example 1

$(“button”).click(function(){

    var div = $(“div”);

    div.animate({height: ‘300px’, opacity: ‘0.4’}, “slow”);

    div.animate({width: ‘300px’, opacity: ‘0.8’}, “slow”);

    div.animate({height: ‘100px’, opacity: ‘0.4’}, “slow”);

    div.animate({width: ‘100px’, opacity: ‘0.8’}, “slow”);

});

The example below first moves the <div> element to the right, and then increases the font size of the text:

Example 2

$(“button”).click(function(){

    var div = $(“div”);

    div.animate({left: ‘100px’}, “slow”);

    div.animate({fontSize: ‘3em’}, “slow”);

});

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

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