Почему анимация не заканчивается до обратного вызова - PullRequest
0 голосов
/ 10 июля 2011

В процессе обучения я всегда изучал и понимал обратные вызовы в jQuery следующим образом:

Функция обратного вызова выполняется после завершения текущей анимации (эффекта).

[...] с анимациями можно запустить следующую строку кода, даже если анимация не завершена.Это может создать ошибки.Чтобы предотвратить это, вы можете создать функцию обратного вызова.Функция обратного вызова не будет вызываться до окончания анимации. Образец цитирования: www.w3schools.com [...]

и

Aобратный вызов - это функция, которая передается в качестве аргумента другой функции и выполняется после завершения ее родительской функции. Образец цитирования: www.jquery.com [...]

Но мой обратный вызов не используетсяпо какой-то причине не работает.

Посмотрите на следующий код:

$(page).slideUp("slow", function() {

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

});

Это должно привести к тому, что поле содержимого будет сдвигаться вверх и, следовательно, исчезать, затем содержимое будет изменено на что-то новое, и, наконец,Контентбокс снова скользит вниз (появляется).Мне нужно, чтобы эти три шага выполнялись один за другим в этом порядке, но каждый шаг должен начинаться только после завершения предыдущего.Вот почему я использую обратный вызов вместо того, чтобы просто иметь это:

$(page).slideUp("slow");

$('div#details').html(details);

$(page).slideDown("slow");

, который заставит все происходить одновременно.

Мой код работает, и я могу переместить содержимое страницы вщелчок кнопки.Но анимация не реагирует так, как я ожидал от этого.При нажатии кнопки содержимое немедленно исчезает без какого-либо анимированного слайда.Новый контент затем плавно перемещается в прекрасной анимации.

Нажмите здесь в левом боковом меню, чтобы увидеть, что происходит.

Я не понимаю, почему нетанимированный слайд, но я подозреваю, что обратный вызов не действует, как я думал, что будет.Кажется, что обратный вызов срабатывает при запуске первой анимации, вместо того, чтобы ждать срабатывания, пока анимация не закончится.Или, может быть, это просто слайд, который вообще не работает?

Может кто-нибудь объяснить мне, чего я не знаю и не вижу в этом чрезвычайно простом коде, включая обратный вызов?

Ответы [ 2 ]

2 голосов
/ 31 января 2012

Вы можете использовать функцию задержки в качестве обходного пути.

$(page).slideUp(500);
$('div#details').html(details);
$(page).delay(500).slideDown(500);
1 голос
/ 10 июля 2011

Поместите слайдДоун в обратный вызов

$(page).slideUp("slow", function() {

    $('div#details').html(details);
    $(page).slideDown("slow");
});

Ваш предыдущий код обновлял div #details только после завершения slideUp.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...