На этом шаге мы рассмотрим использование функции обратного вызова.
Чтобы обеспечить возможность поочередного воспроизведения эффектов для различных наборов элементов, библиотека jQuery позволяет указывать функцию обратного вызова в каждом методе, отвечающем за воспроизведение эффекта. Как мы уже видели при обсуждении обработчиков событий и метода .queue(), функции обратного вызова - это обычные функции, которые передаются в виде аргументов методов. В случае анимационных эффектов они передаются в виде последнего аргумента.
Используя функцию обратного вызова для организации поочередного воспроизведения эффектов сворачивания и разворачивания, мы можем сначала развернуть четвертый параграф сверху вниз, а затем свернуть третий снизу вверх. Но прежде рассмотрим, как производится вызов метода .slideDown() с функцией обратного вызова:
$(document).ready(function() {
$('p:eq(2)');
.css('border', '1px solid #333')
.click(function() {
$(this).next().slideDown('slow',function() {
// этот программный код выполняется после того, как закончится
// разворачивание 3-го параграфа
});
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Здесь следует быть очень внимательными в отношении определения элемента, который должен сворачиваться. Так как функция обратного вызова находится внутри метода .slideDown(), происходит изменение контекста для конструкции $(this). Здесь $(this) больше не является третьим параграфом, как это было в случае метода .click(); поскольку метод .slideDown() связан с вызовом $(this).next(), то все, что находится внутри этого метода, будет интерпретировать $(this) как следующий братский узел, то есть четвертый параграф. Таким образом, если мы поместим внутрь функции обратного вызова инструкцию $(this).slideUp('slow'), в результате свернется тот же параграф, который только что был развернут.
Самый простой способ обеспечить неизменность ссылки $(this) заключается в том, чтобы сохранить ее в переменной внутри метода .click(), например var $thirdPara = $(this).
Теперь переменная $thirdРаrа будет ссылаться на третий параграф как внутри, так и за пределами функции обратного вызова. Ниже приводится программный код, использующий новую переменную:
$(document).ready(function() {
var $thirdPara = $('p:eq(2)');
$thirdPara
.css('border', '1px solid #333')
.click(function() {
$(this).next().slideDown('slow', function() {
$thirdPara.slideUp('slow');
});
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Рис.1. Результат использования новой переменной
Полный текст этого примера можно взять здесь.Использование переменной $thirdPara внутри функции обратного вызова для метода .slideDown() опирается на одну из особенностей замыканий.
На следующем шаге мы закончим изучение этого вопроса.
