На этом шаге мы рассмотрим одновременное и поочередное выполнение эффектов.
Но как быть, если одновременно с перемещением элемента <div> вправо потребуется сделать его полупрозрачным? Если два анимационных эффекта должны протекать с одной и той же скоростью, их можно просто объединить в одном вызове метода .animate(). Но в данном примере эффект растворения воспроизводится со скоростью 'fast', тогда как эффект перемещения воспроизводится со скоростью 'slow'. В таком случае нам на выручку приходит вторая форма вызова метода .animate():
$(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
}, {duration: 'slow', queue: false })
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});
Рис.1. Одновременное выполнение эффектов
Полный текст этого примера можно взять здесь.Во втором аргументе, который является отображением параметров, допускается указывать параметр queue, который в случае установки в значение false предписывает запустить анимационный эффект одновременно с запущенным ранее.
На следующем шаге мы продолжим изучение этого вопроса.
