Шаг 70.
Библиотека jQuery. Эффекты. Одновременное и поочередное выполнение эффектов. Функции обратного вызова (окончание)

    На этом шаге мы рассмотрим еще один пример использования функции обратного вызова.

    Теперь, когда мы обсудили функции обратного вызова, можно вернуться к программному коду, приводившемуся на 67 шаге, где мы добавляли изменение цвета фона ближе к концу последовательности эффектов. Вместо вызова метода .queue(), как это делалось ранее, мы можем просто задействовать функцию обратного вызова:

$(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', function() {
        $switcher
          .css('backgroundColor', '#f00');
      })
      .slideDown('slow');
  });
});

Рис.1. Результат использования новой переменной

Полный текст этого примера можно взять здесь.

    Здесь цвет фона элемента <div id="switcher"> также изменяется на красный после воспроизведения эффекта сворачивания и перед воспроизведением эффекта разворачивания.

    Со следующего шага мы начнем рассматривать Манипулирование деревом DOM.




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