SeanTierney

Dynamic jQuery Animation Block

November 8, 2013 Interactive Design / Development 0

php-tutorials

While working on a recent project, I quickly realized that I was constantly writing jQuery animation blocks over and over and over again. I thought that there had to be a better way to handle all of these animations so I took a few minutes and worked to create a dynamic animation function that you can pass a speed, callback, and one or more parameters to animate and it does the rest. Have a look and feel free to let me know if there are any questions or issues.

Here is the function:

/* ***************************************************************************
FUNCTION: animateThis

Description:
Takes in a few parameters and creates an animation block and runs it and will
return if necessary, jqueryUI required!

Parameters
a = the speed
b = the object we want to animate (must be passed as an object!!!)
c = multi-d array of properties to be animated along with the values
d = the type of jqueryUI animation (default is easeInOutQuad)
e = callback function (if any), can be a reference back to this function

Returns
NA

* BEGIN ******************************************************************* */
function animateThis(duration,objectToAnimate,properties,easing,callback){
animations = {};
for (var x in properties){
animations[properties[x][0]] = properties[x][1];
}
objectToAnimate.animate(
animations,
duration,
(easing==””?”easeInOutQuad”:easing),function(){
callback
});
}
/* END ******************************************************************** */

And here is how to call it:

animateThis(750,$(“#neo_main_navigation_container”),Array(Array(“top”,(parseInt($(“#neo_main_navigation_container”).height()) * -1))),””,””);