回调函数触发过早

Question

我在 jQuery 中有这个简单的函数：

function detailspage(page) {

  if (page != checkcurrent) {

    checkcurrent = page;

    $('div#details').children("div").slideUp("slow", function() {

        $('div#details').children("div"+page).slideDown("slow");

    });

  };

};

我已经在一个名为<div id="details">的外部<div>中放置了三个<div>，默认情况下它们都滑出视线。现在我想在每个<div>上添加一个按钮，当点击按钮时，它会向下滑动。当然，在新的<div>下降之前，必须先将打开的<div>滑上并隐藏。这就是为什么我尝试使用上面这个简单的回调函数的原因。

（变量page包含一个id，例如#info或#cast_crew，用于指定其中一个div。）

但它不起作用：您可以通过单击页面底部左侧命名为“Cast&crew”、“Info”和“Galleri”的三个按钮来查看错误。 除触发没有任何延迟的回调函数之外，它都工作正常。回调没有任何效果。我只是希望在当前框的滑上完成后，新框的滑下可以开始。

是什么问题？为什么我的回调不起作用？

谢谢。

- Steeven

Answer 1

我建议您查看jQuery中的Promise函数，以确保所有元素都已完成动画：http://api.jquery.com/promise/

对于您的示例：

function detailspage(page) {
    if (page != checkcurrent) {
        // so we only have to search the dom once
        var details = $('div#details');
        checkcurrent = page;
        details.children("div").slideUp("slow").promise().done(
            function() {
                $('div' + page).slideDown("slow");
            });
    };
};

工作示例：http://jsfiddle.net/cm3pv/6/

- Gary.S

---

太神奇了！我遇到了与 OP 相同的问题。回调函数没有按照预期工作，它立即触发而不是等待 slideUp() 完成。尝试按照你的示例实现 .promise().done()，BOOM！问题解决了！谢谢 :) - norsewulf

太好了！我知道这已经过时了，但是我一直在寻找很长时间，试图弄清楚它。当我想要发表一篇长篇文章时，我突然明白了。“我可能不是唯一有这个问题的人。尝试使用.promise/.done，嘭！它完美地解决了我的问题。谢谢！ - somdow

为什么按照文档建议将完整函数作为第二个参数传递不起作用？ - Sal

Cy在fadeIn完成时触发了几次（console.log被触发了6次）。Promise()解决了我的问题。 - Grzegorz

Answer 2

我尝试了Gary.S的被接受的答案，但我的函数仍然在动画完成之前触发。我在另一篇帖子中找到了一个建议如何让jQuery等待直到效果完成？ 需要使用$.when( func ).done( function () { myFunc(); } ); 我必须将我的函数放在一个新函数中。

最终我使用的代码看起来像这样（使用您的示例）：

$.when( $('div#details').children("div").slideUp("slow") ).done(){ function() {
    $('div#details').children("div"+page).slideDown("slow");
});

- Austin Jackson