На этом шаге мы рассмотрим метод, используемый для правильного выполнения последовательности эффектов.
Один из способов обеспечить необходимую очередность выполнения методов, не являющихся методами воспроизведения эффектов, заключается в использовании метода с соответствующим именем .queue(). Ниже показано, как можно его задействовать в нашем примере:
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .fadeTo('fast',0.5) .animate({ 'left': paraWidth - switcherWidth }, 'slow') .fadeTo('slow',1.0) .slideUp('slow') .queue(function() { $switcher .css('backgroundColor', '#f00') .dequeue() }) .slideDown('slow'); }); });
Рис.1. Правильная очередность выполнения эффектов
Полный текст этого примера можно взять здесь.При получении функции обратного вызова, как в данном примере, метод .queue() добавляет ее в очередь эффектов соответствующего набора элементов. Внутри функции мы устанавливаем красный цвет фона и затем добавляем дополнительный вызов метода .dequeue(). Вызов этого метода .dequeue() позволяет очереди анимационных эффектов определить момент, с которого следует ее продолжить, и завершить цепочку последующим вызовом метода .slideDown('slow'). Если не вызвать метод .dequeue(), воспроизведение последовательности анимационных эффектов остановится.
При исследовании способов поочередного воспроизведения эффектов на множестве наборов элементов мы рассмотрим другие способы объединения в очередь методов, не являющихся методами воспроизведения эффектов.
На следующем шаге мы рассмотрим работу с несколькими наборами элементов.