Question

我有两个功能，每个功能都有一些动画。我想在完成第一个函数的所有动画时调用第二个函数。我尝试了任何东西，因为函数1中的动画有可变的时间我不能使用特定的一个来说当这一个完成所有动画完成。它会同时播放所有动画。如果有人能帮助我，我将不胜感激。这是我的代码：

function goToSubMenu1(subMenu1Id,currentPage,selectedButtonText){

    closeCurrentPage(subMenu1Id);
    openTargetPage(subMenu1Id,currentPage,selectedButtonText);
}

//-------------------------------------------------------------open page
function openTargetPage(subMenu1Id,currentPage,selectedButtonText){
    if(currentPage=='homePage'){
        toHomePageMini();
        subMenu1(subMenu1Id,selectedButtonText);
        pageInAnimation('homePage');
        pageInAnimation('subMunu1Container');
        $('#'+subMenu1Id).css({'display':'none'});
    }
    else{
        subMenu1(subMenu1Id,selectedButtonText);
        pageInAnimation('homePage');
        pageInAnimation('subMunu1Container');
        $('#'+subMenu1Id).css({'display':'none'});
    }
}
//-------------------------------------------------------------close page
function closeCurrentPage(subMenu1Id){
    pageOutAnimation('homePage');
    pageOutAnimation('subMunu1Container');
    $('#'+subMenu1Id).css({'display':'block'});
}

Answer 1

我相信这样做的正确方法是使用函数回调，运行代码执行后。这应该会有所帮助：

http://api.jquery.com/jquery.callbacks/

另一种方法是使用jQuery的.each方法 - 进行异步执行（使用此方法，您必须按照您的方式订购元素的选定列表）

http://api.jquery.com/jquery.each/

Answer 2

使用jQuery，您可以为函数指定一个变量名（或不使用它，如下例所示），然后执行时间线。

可以使用when() - then()对完成此操作。

例如：

$.when(function () {}).then(function () {});

Answer 3

我没有阅读您的代码，但如果您想要达到您想要的效果，可以使用delay()功能。如果您知道第一个动画需要多长时间，只需将delay()的参数设置为比第一个动画时间长的任何时间，它就会完成工作。

Answer 4

如果您使用.animate()方法，则会在其声明中提供complete callback

在完成其他功能的所有动画后调用一个函数

4 个答案: