回调函数触发得太早

Question

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

function detailspage(page) {

  if (page != checkcurrent) {

    checkcurrent = page;

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

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

    });

  };

};

我将三个

放入另一个名为

中>，默认情况下它们都是向上滑动并看不见的。我现在希望在单击每个按钮时使它们向下滑动。当然，打开的

必须首先向上滑动并移出视线，然后再向下滑动新的

。这就是为什么我尝试了上面这个简单的回调函数。

（page 变量包含其中一个 div 的 ID，例如 #info 或 #cast_crew。 ）

但它不起作用： 您可以通过单击页面底部左侧的三个按钮来查看错误，名为“演员和工作人员”、“信息”和“画廊”。

除了似乎不会造成任何延迟的回调函数之外，这一切都可以正常工作。回调没有任何效果。我只是希望在当前框的向上滑动完成时开始新框的向下滑动。

怎么了？为什么我的回调不起作用？

谢谢。

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/

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