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:
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);
}
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)});
}
Another approach to animation in an Ajax application is to use the Bindows (www.bindows.net) animation capabilities. Have a look at the detailed tutorial here: http://www.bindows.net/documentation/tutorials/animation.html.
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.
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.
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);
});
I have followed all things that you said. Thanks.
zaklady bukmacherskie i thing you are talented writer
Thanks for this good information. this is a really good blog.
What is the name of template you used in your www ?
Just want to tell you that your www content is interesting, but you must improve site graphics
Great Information, very useful and great blog!
thanks for many usefull infos.Wish all the best.
Good read. Needed more pictures though.
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.
Wow this really takes me back, like your blog layout too. Is it Drupal?
Thank you very much. This really helped me with my work. I appreciate your help. Thanks a lot.
Thanks a Lot
Hello there, You have done an incredible job. I will certainly digg it and personally suggest to my friends.
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.