jquery animation headache
- by OneNerd
Doing some jquery animation. I have certain divs set up with an attribute of ani_seq='x' where x is 1 to 9, and then have a class assigned of 'animate'. I am using the following code, which works fine, and fades in each item in sequence:
function my_animate( in_wrapper_id ) {
$j("#" + in_wrapper_id + " .animate").hide(); // hide all items to be animated
// animate all seq1 items --
$j("#" + in_wrapper_id + " [ani_seq='1']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='2']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='3']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='4']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='5']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='6']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='7']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='8']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='9']").fadeIn( 1000 ); });
});
});
});
});
});
});
});
}
The problem I have is, some items are not just fade-in. Some should slide in from the left or right. So, I can certainly write a custom function to do that. What I do not know how to do is set up the custom function so it works like the fadeIn() function in that it accepts a callback function that will be executed when the animation is done.
For example, lets say I i have a function like this (not sure this is the proper format):
function custom_animate ( in_time_in_ms, in_callback_function ) {
// get class of element, and based on class perform either
// a fade-in, or a slide-in from left, or a slide-in from right
// then after animation is done, return control back to calling
// function so it can resume
}
I would want to replace all of the fadeIn() calls in the first piece of code with custom_animate(), and then inside that function, determine what kind of animation to perform.
Can anyone help?
Thanks -
