Jquery Animate

jQuery Effects - Animation

---

The jQuery animate() method lets yous exercise custom animations.

jQuery

---

jQuery Animations - The animate() Method

The jQuery animate() method is used to exercise custom animations.
Syntax:

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

The required params parameter defines the CSS properties to survive animated.
The optional speed parameter specifies the duration of the effect. It tin accept the next values: "slow", "fast", or milliseconds.
The optional callback parameter is a role to survive executed later the animation completes.
The next instance demonstrates a uncomplicated exercise of the animate() method; it moves a <div> chemical part to the right, until it has reached a left belongings of 250px:

Example

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 

By default, all HTML elements cause got a static position, in addition to cannot survive moved.
To manipulate the position, cry upwardly to offset laid the CSS seat belongings of the chemical part to relative, fixed, or absolute!

---

---

jQuery animate() - Manipulate Multiple Properties

Notice that multiple properties tin survive animated at the same time:

Example

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 

Is it possible to manipulate ALL CSS properties alongside the animate() method?

Yes, almost! However, in that place is 1 of import affair to remember: all belongings names must survive camel-cased when used alongside the animate() method: You volition remove to write paddingLeft instead of padding-left, marginRight instead of margin-right, in addition to therefore on.

Also, color animation is non included inward the substance jQuery library.
If yous desire to animate color, yous remove to download the Color Animations plugin from jQuery.com.

---

jQuery animate() - Using Relative Values

It is equally good possible to define relative values (the value is in addition to then relative to the element's electrical flow value). This is done past times putting += or -= inward front end of the value:

Example

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
}); 

---

jQuery animate() - Using Pre-defined Values

You tin fifty-fifty specify a property's animation value equally "show", "hide", or "toggle":

Example

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
}); 

---

jQuery animate() - Uses Queue Functionality

By default, jQuery comes alongside queue functionality for animations.
This agency that if yous write multiple animate() calls later each other, jQuery creates an "internal" queue alongside these method calls. Then it runs the animate calls ONE past times ONE.
So, if yous desire to perform dissimilar animations later each other, nosotros accept payoff 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 instance below offset moves the <div> chemical part to the right, in addition to 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");
}); 

---