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