события очереди jQuery

Question

Итак, я хочу скоординировать некоторые эффекты, используя jQuery для некоторых вызовов AJAX, с которыми я работаю. Моя проблема в том, что fadeIn для второго div запускается одновременно с fadeOut для первого div.

Это может относиться и к другим событиям, поэтому мне любопытно, есть ли способ сделать запуск fadeId ТОЛЬКО после завершения fadeOut?

jQuery("#div1").fadeOut("slow"); 
jQuery("#div2").fadeIn("slow");

Спасибо

Answer 1

Обычно этого достаточно для быстрой анимации, но если вы хотите поставить в очередь ряд эффектов, вы также можете использовать методы queue () и dequeue (), например:

$("#div1").fadeOut();
$("#div1").queue(function()
{
   $(this).fadeIn();
   $(this).dequeue();
});
$("#div").queue(function() 
{
   $(this).html("And now I'm sliding up. Wee!");
   $(this).slideUp("slow");
   $(this).dequeue();
});

Здесь queue () добавляет функцию в очередь объекта (которая не должна быть анимацией), а dequeue () выполняет эту функцию.

См. документы для получения дополнительной информации.

Answer 2

Вы можете сделать это с помощью обратного вызова. Проверьте jQuery документы .

jQuery("#div1").fadeOut("slow", function() { jQuery(this).fadeIn('slow'); }); 

Практически все эффекты jQuery требуют обратного вызова для выполнения после завершения эффекта.

Answer 3

В приведенном выше примере были некоторые опечатки, которые не позволяли ему работать в Firefox, исправленная версия:

$("#div1").fadeOut();
$("#div1").queue(function()
{
   $(this).fadeIn();
   $(this).dequeue();
});
$("#div").queue(function() 
{
   $(this).html("And now I'm sliding up. Wee!");
   $(this).slideUp("slow");
   $(this).dequeue();
});