Функция обратного вызова срабатывает слишком рано

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 содержит идентификатор для одного из div, например #info или #cast_crew.)

Но это не работает: Вы можете увидеть ошибку, нажав три кнопки слева внизу страницы, названные «Состав и команда», «Информация» и «Галерея» .

Все это работает отдельно от функции обратного вызова, которая, похоже, не вызывает задержки.Обратный вызов не имеет никакого эффекта.Я просто хочу, чтобы слайд нового бокса начинался, когда закрытие текущего бокса закончилось.

Что не так?Почему мой обратный вызов не работает?

Спасибо.

Answer 1

Я бы взглянул на функцию обещания в jquery, чтобы убедиться, что все элементы завершили анимацию: 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");
});