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>放在另一个名为<div>的{{1}}内，并且默认情况下它们全部滑落并且不在视线范围内。我现在希望在按下每个按钮时向下滑动它们。当然，在打开新的<div id="details">之前，必须首先将<div>打开并且看不见。这就是为什么我在上面尝试过这个简单的回调函数。

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

但它不起作用：You can see the error by clicking the three buttons on the left in the bottom of the page, named "Cast & crew", "Info" and "Galleri"。

除了似乎没有引起任何延迟的回调函数之外，它都有效。回调无效。我只是希望在当前框的滑动完成时启动新框的滑动。

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

谢谢。

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的接受答案，但我的功能在动画完成之前仍在触发。我在另一篇帖子How to get jQuery to wait until an effect is finished?

上找到了建议

需要使用$.when( func ).done( function () { myFunc(); } );

我必须将我的功能放在一个新功能中。

我最终使用的是这样的（使用你的例子）：

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

回调函数过早触发

2 个答案: