如何让jQuery等待递归函数完成？

我试图一个接一个地为一系列元素制作动画，然后，当所有元素都完成动画制作后，执行一些代码

以下是我目前掌握的情况：

// this function is called on mouseleave or a click
function hideItems(){
    var opts = {duration:100, direction:"down", easing:"easeOutExpo"};
    $("li").last().hide("drop", opts, function hidePrev(){
        $(this).prev("li").hide("drop", opts, hidePrev);
    });
    $("ul").css('display','none');// i need this to wait
}

我将检查所有的

li

元素，并将它们隐藏起来。我需要在迭代

li

元素之后隐藏

ul

元素

我尝试了以下几点，但都没有成功：

// this function is called on mouseleave or a click
function hideItems(){
    var opts = {duration:100, direction:"down", easing:"easeOutExpo"};
    $("li").last().hide("drop", opts, function hidePrev(){
        $(this).prev("li").hide("drop", opts, hidePrev);
    }).then(function(){
        $("ul").css('display','none');
    });// this fails with: 'Uncaught TypeError: undefined is not a function'
}

---

只需使用递归函数，通过

：visible

伪类选择最后一个可见的

li

：

var opts = {duration:100, direction:'down', easing:'easeOutExpo'};

function recursiveHide(){
    $('li:visible').last().hide('drop', opts).promise().then(function(){
        if ($('li:visible').length){
            recursiveHide();
        } else {
            $('ul').hide();
        }
    });
}
recursiveHide();

还请注意，您需要对动画jQuery对象调用

.promise（）

，以访问其

表格

界面

---

请参阅回调。在hidePrev函数中，需要一个条件来测试它们是否都被隐藏。如果他们都被藏起来了，就藏起来。如果你想使用一个承诺，你必须将它附加到ul的所有李的承诺上，但是我很确定它只会启动第一步。