단일 함수 내에서 여러 Jquery 아코디언을 확장하고 모든 애니메이션이 완료 될 때까지 기다릴 수 있습니까?

Question

jQuery UI 1.8을 사용하고 있습니다.

Jquery 애니메이션은 비동기입니다. 여러 섹션이 포함 된 Jquery 아코디언이 포함 된 페이지가 있기 때문에 이것이 내게 문제라고 생각합니다. 페이지가로드되면 이러한 섹션 중 일부를 확장하는 Javascript 함수를 호출합니다. 확장에 따라 애니메이션이 적용됩니다 (예 : 느리게 확장).

또한 페이지 시작시 Jquery를 사용하여 페이지의 특정 요소로 스크롤하는 기능이 있습니다. 그것은 그 자체로는 작동하지 않으며, 나는 아코디언의 애니메이션으로 그것을 좁혔다 고 생각합니다. 나는 이것을 수행하기 위해 window.setTimeout(myScrollFunction, 3000)을 사용할 때 스크롤을 수행하는 함수를 호출하기 때문에 이것을 이론화합니다. 애니메이션이 페이지를 스크롤링하지 못하도록하는 것과 거의 같습니다.

나는 .promise() 기능에 대해 들어 봤지만, 여기서는 나에게 도움이되지 않을 것이라고 생각한다. 내가해야할 일은 아코디언 섹션을 확장하는 함수를 실행하는 것입니다.하지만 그 안에서 호출 된 모든 애니메이션이 끝날 때까지 기다렸다가 다음 함수로 넘어갑니다.

코드 샘플을 붙여 넣을 수 없으며 테스트 케이스를 만드는 것이 복잡하고 시간이 많이 걸릴 수 있으므로 좋은 답변을 얻을 수있을만큼 명확한 상황을 설명하기를 바랍니다.

개념 예 :

나는 이것이 당신에게 내가하고 싶은 것들에 대한 아이디어도 제공 할 수 있습니다 :

$(document).ready(function() { 
    //I want to call ExpandSections() on startup 
    ExpandSections(); 

    //but I don't want to call ScrollToElement() until 
    //all accordion sections that were 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); 
} 

Answer 1

당신은 아코디언의 change/accordionchange 이벤트를 사용해야합니다.

마지막 활성 옵션이 트리거되기 전까지 스크롤 이벤트를 바인드하기 위해 기다렸습니다.

예 : 여기

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(); 
}); 

바이올린 : http://jsfiddle.net/VyzPg/1/ 당신이 본, 내 예를 업데이트했습니다