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

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

    Чтобы обеспечить возможность поочередного воспроизведения эффектов для различных наборов элементов, библиотека 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() опирается на одну из особенностей замыканий.

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




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