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

    Допускается объединять в цепочки не только вызовы метода .animate(), но и любые другие методы jQuery воспроизведения эффектов. Например, можно поочередно воспроизвести эффекты для элемента <div id="switcher"> в следующем порядке:

1. Довести непрозрачность до значения .5 с помощью метода .fadeTo().
2. Переместить вправо с помощью метода .animate().
3. Сделать его полностью непрозрачным с помощью метода .fadeTo().
4. Скрыть с помощью метода .slideUp().
5. Отобразить снова с помощью метода .slideDown().

    Для этого необходимо лишь объединить в цепочку данные методы в указанном порядке:

$(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
      }, 'slow')
      .fadeTo('slow',1.0)
      .slideUp('slow')
      .slideDown('slow');
  });
});

Рис.1. Поочередное выполнение эффектов

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

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