回调函数触发得太早 [英] Callback function fires too early

问题描述

我在jQuery中有这个简单的功能:

I have this simple function in 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 id ="details"> 的÷ div> 内>，并且默认情况下它们都向上滑动并看不见.现在，当单击每个按钮时，我希望它们每个都向下滑动.当然，在将新的< div> 向下滑动之前，必须先向上滑动并使其不可见.这就是为什么我在上面尝试了这个简单的回调函数的原因.

I have put three <div>'s inside another <div> called <div id="details">, and they are all slided up and out of sight by default. I now wish to make each of them slide down, when a button for each of them is clicked. Of course a <div> that is open must first be slided up and out of sight, before the new one is slided down. That is why I have tried this simple callback function above.

( page 变量包含一个 div 的ID，例如 #info 或 #cast_crew .)

(The page variable contains an id for one of the div's, like #info or #cast_crew.)

但是它不起作用:您可以通过单击页面底部左侧的三个按钮来看到错误.，分别命名为演员和剧组"，信息"和加莱里" .

除了回调函数外，所有这些工作似乎都不会引起任何延迟.回调无效.我只是希望新框的向下滑动在当前框的向上滑动完成后开始.

It all works apart from the callback function that doesn't seem to cause any delay. The callback has no effect. I simply want the slidedown of the new box to start when the slideup of the current box is finished.

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

What is wrong? Why doesn't my callback work?

谢谢.

推荐答案

我将看一下jquery中的promise函数，以确保所有元素都完成了动画:

I would take a look at the promise function in jquery to ensure all elements have completed the animation: 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/

这篇关于回调函数触发得太早的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！