Alex Rivera | Logout

How do I chain or queue custom functions using JQuery?

Asked 2009-07-07T22:54:19.373
24

I have multiple functions the do different animations to different parts of the HTML. I would like to chain or queue these functions so they will run the animations sequentially and not at the same time.

I am trying to automate multiple events in sequence to look like a user has been clicking on different buttons or links.

I could probably do this using callback functions but then I would have to pull all of the animations from the different functions and regroup in the right pattern.

Does the jquery "queue" help? I couldn't understand the documentation for the queue.

Example, JQuery:

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML:

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

Thanks.

EDIT: I tried it with timers but I thought there is a better way to do it.

EDIT #2:

Let me be more specific. I have multiple functions bound to click & hover events on different elements of the page. Normally these functions have nothing to do with each other ( they don't reference each other). I would like to simulate a user going through these events without changing the code of my existing functions.

Edit
Report

1 Answer

0
$('div#animateTest1').animate({left: '+=200'},2000, 
function(){
   $('div#animateTest2').animate({ width: '+=200' }, 2000);
}
);
answered 2012-01-30T14:37:43.050

Your Answer