asynchronous - Is it possible to expand multiple Jquery accordions within a single function and wait until all animations are complete? -

i using jquery ui 1.8.

it has come attention jquery animations asynchronous. think problem me because have page jquery accordion contains several sections. when page loads, call javascript function expands of these sections. animate expand (ie, expand slowy).

also on page's startup function uses jquery scroll particular element on page. not work itself, , think i've narrowed down accordion's animations. theorize because, when use window.settimeout(myscrollfunction, 3000) call function performs scroll, works. it's if animations keeping page scrolling sort of makes sense.

i've heard of .promise() function, thinking might not work me here. need execute function expands accordion sections, wait until animations invoked within finished before moving on next function.

i can't paste code samples , creating test case complicated , time-consuming, hoping explained situation clear enough answers.

conceptual example:

i'll give better idea of want do:

$(document).ready(function () {     //i want call expandsections() on startup     expandsections();       //but don't want call scrolltoelement() until      //all accordion sections expanded in expandsections()     //have finished expanding.     scrolltoelement();  });  function expandsections(){     element1.accordion("option", "active", 0);     element2.accordion("option", "active", 0);     element3.accordion("option", "active", 0); }  function scrolltoelement() {     $('html, body').animate({         scrolltop: elementtoscrollto.offset().top     }, 1); } 

you should use accordion's change/accordionchange event.

here i've waited bind scroll event until before last active option triggered.

example:

function scrolltoelement($el) {     $('html, body').animate({         scrolltop: $el.offset().top     }, 1); }  function expandsections() {     var $acc = $('#accordion');     $acc.on('accordionchange', function (event, ui) {         scrolltoelement($('#scroll-to-me'));     });     $acc.accordion("option", "active", 2); } $(function () {     var ac = $("#accordion").accordion({         animated: 'swing', duration: 2000     });     expandsections(); }); 

fiddle here: http://jsfiddle.net/vyzpg/1/