Here’s another jQuery animation experiment, this time with animating text using an easing equation. You can see it here or check it out below:

There’s a few interesting things going on here.  First off, I’m using the jQuery easing plug-in, which you can read about here. It uses Robert Penners easing equations for the math.  In this case, I use the easeOutElastic effect to give the text that bounce feel when it completes its animation. I set the initial position of the text in jQuery to be off the screen.

I’m using the callback feature of jQuery to kick off the 2nd and 3rd text animations, passing the function name (flyin2 and flyin3) to get the next animation to kick off.  It is interesting how, through the use of callbacks, you can almost start creating keyframes with jQuery animations.

The final thing to call out is the css, where I specify that all <p> tags have position:relative. I also had to make sure that the containing <div> element had overflow:hidden to prevent the scrollbar from showing up when the elements were positioned off the frame.

Here’s the jQuery code.:

jQuery(function($) { 
function flyin(event)
{ $("#p2").css("left","-700px"); $("#p3").css("left","700px"); $("#p1").css("left","700px"); $("#p1").animate({ "left": 0 },300, "easeOutElastic", flyin2); }

function flyin2(event)
{ $("#p2").animate({"left":0},300, "easeOutElastic", flyin3); }

function flyin3(event)
{ $("#p3").animate({"left":0},300, "easeOutElastic", null); }

flyin();

});