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