На этом шаге мы рассмотрим простой пример поочередного выполнения эффектов.
При применении множества эффектов к одному и тому же набору элементов поочередного их воспроизведения легко добиться за счет составления цепочки эффектов. Для демонстрации такого способа поочередного воспроизведения мы снова реализуем перемещение области с меткой Стиль текста к правому краю страницы, увеличение его высоты и ширины его границы. Только теперь эти три эффекта будут воспроизводиться поочередно, для чего каждый эффект будет оформляться в виде отдельного вызова .animate() и все три будут объединяться в цепочку:
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.animate({left: paraWidth - switcherWidth}, 'slow')
.animate({height: '+=20px'}, 'slow')
.animate({borderWidth: '5px'}, 'slow');
});
});
Рис.1. Поочередное выполнение эффектов
Полный текст этого примера можно взять здесь.Напомним, что при объединении в цепочку все три вызова метода .animate() можно произвести в одной строке, однако здесь мы поместили их в отдельных строках для большей удобочитаемости.
На следующем шаге мы продолжим изучение этого вопроса.
