回调函数过早触发

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

(该page变量包含其中一个的id div,如#info或#cast_crew.)

但它不起作用:您可以通过单击页面底部左侧的三个按钮(名为"Cast&crew","Info"和"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/