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