Шаг 63.
Библиотека jQuery. Эффекты. Одновременное и поочередное выполнение эффектов. Работа с одним набором элементов

    На этом шаге мы рассмотрим простой пример поочередного выполнения эффектов.

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

    На следующем шаге мы продолжим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг