In the last jQuery Animate article I wrote, I mentioned how to use the .animate() function with few tricks.

But here, I am going to write about jQuery Animate function in general and I will explain few things and some tricks.

The jQuery Animate is a smart object because could be used at any syntax.
I mean,
We can use the default syntax of this function as follow:

$().animate({
/* params */ },
/* integet time period in milliseconds */
);

We may also use Easing with animation. (See easing plugin)
NOTE: the jQuery .animate() has 2 easing built-in values: “linear” and “swing”

// you should include the easing plugin.
$().animate({
/* params */ },
/* integet time period in milliseconds */,
/* easing string */
);

The most important thing to know is how to run a code after the animation is done.
Actually, to write a code to be run after the animation is done is the use this syntax:

$().animate(
{/* params */},
/* integer time period in milliseconds */,
function (){ /* Your code here to be run after animation. */ }
);

We can also use easing here:

$().animate(
{/* params */},
/* integer time period in milliseconds */,
/* easing string */,
function (){ /* Your code here to be run after animation. */ }
);

And this is the complete .animate() syntax in jQuery.

Now, let’s get involved with calculations that makes the .animate() smart and easy to use.
Actually,
we can animate a div by increasing or decreasing its properties (Ex: width, height, top, left, opacity… etc).
I mean it by saying Increasing or decreasing.. Because if we set the value of the Params like the following:

$("div").animate(
{width:"+=150px"},
500
);

This means, the width will be increased by 150px. So, if we have a div with 450px and run the above code… The div’s width after animation is done will bee 600px.
We use this calculations when we don’t know the exact param of the html object OR if we use the value as a variable.


jQuery animate() Examples

Here I will show 2 examples:

Increasing or decreasing values:
this code increases the div’s width by 80px each time you click on it.


// HTML
<div style="width:200px;height:20px;background:#ccc;cursor:pointer;" id="increasing" onclick="increaseIt();"></div>
// jQuery
function increaseIt(){
var w = $('#increasing').css("width").replace("px","");
if(w>600){
$('#increasing').css("width","200px");
}
$('#increasing').animate({width:'+=80px'},500);
}

Run code after animation is done:
this code expand the width from 200px to 400px and when done, it expands the height from 20px to 150px


// HTML
<div id="anim" onclick="animDone();" style="width:200px;height:20px;background:#ccc;cursor:pointer;"></div>
// jQuery
function animDone(){
$("#anim").css({width:"200px",height:"20px"});
$("#anim").animate({width:"400px"},500,function(){$(this).animate({height:"150px"},500)});
}


18 Replies to “jQuery Animate – Advanced”

  1. Thanks,
    But bindows framework is not based on jQuery. They have their own library.
    This maybe useful but has no relation with jQuery and this article.

  2. You should probably realize that any jQuery purist would barf at your example code due to the in-line JavaScript event handlers. You should have handled this with event binding.

  3. Heavy animation causes slow downs in modern browsers, because the DOM is busy repainting everything. But the problem lightens up with canvas or svg.

    Anyhow, the follow looks a little better.

    <div style=”width:200px;height:20px;background:#ccc;cursor:pointer;” id=”increasing”/>

    $( “#increasing” ).click( function( e ){
    var elWidth = parseInt( $( e.target ).css( “width” ), 10 );

    elWidth = ( elWidth > 600 ) ? 200 : elWidth + 80;
    $( e.target ).animate({
    width: elWidth + “px”
    }, 500);
    });

  4. The writer of this blog must be intensely proud. I do like to think myself to be in possession of a discerning eye for writing, and entries such as this truly do put a smile on my face. Keep it going.

  5. Hello there, You have done an incredible job. I will certainly digg it and personally suggest to my friends.

  6. Wow! Wow!! This is great. I am still fighting to understand this jqery of a thing. With this tool somebody can control any element on the browser.

Leave a Reply

Your email address will not be published. Required fields are marked *