Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel