1

我正在使用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);
}
4

1 回答 1

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/

于 2013-08-15T18:52:40.283 回答