На этом шаге мы рассмотрим одновременное и поочередное выполнение эффектов.
Но как быть, если одновременно с перемещением элемента <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 предписывает запустить анимационный эффект одновременно с запущенным ранее.
На следующем шаге мы продолжим изучение этого вопроса.