На этом шаге мы рассмотрим метод, используемый для правильного выполнения последовательности эффектов.
Один из способов обеспечить необходимую очередность выполнения методов, не являющихся методами воспроизведения эффектов, заключается в использовании метода с соответствующим именем .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(), воспроизведение последовательности анимационных эффектов остановится.
Примечание. Дополнительная информация о методах .queue() и .dequeue() и примеры их использования приводятся по адресу: http://docs.jquery.com/Effects.
При исследовании способов поочередного воспроизведения эффектов на множестве наборов элементов мы рассмотрим другие способы объединения в очередь методов, не являющихся методами воспроизведения эффектов.
На следующем шаге мы рассмотрим работу с несколькими наборами элементов.
