Шаг 67.
Библиотека jQuery. Эффекты. Одновременное и поочередное выполнение эффектов. Работа с одним набором элементов (окончание)

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

    Один из способов обеспечить необходимую очередность выполнения методов, не являющихся методами воспроизведения эффектов, заключается в использовании метода с соответствующим именем .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')
      .queue(function() {
        $switcher
          .css('backgroundColor', '#f00')
          .dequeue()
      }) 
      .slideDown('slow');
  });
});

Рис.1. Правильная очередность выполнения эффектов

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

    При получении функции обратного вызова, как в данном примере, метод .queue() добавляет ее в очередь эффектов соответствующего набора элементов. Внутри функции мы устанавливаем красный цвет фона и затем добавляем дополнительный вызов метода .dequeue(). Вызов этого метода .dequeue() позволяет очереди анимационных эффектов определить момент, с которого следует ее продолжить, и завершить цепочку последующим вызовом метода .slideDown('slow'). Если не вызвать метод .dequeue(), воспроизведение последовательности анимационных эффектов остановится.


   Примечание. Дополнительная информация о методах .queue() и .dequeue() и примеры их использования приводятся по адресу: http://docs.jquery.com/Effects.

    При исследовании способов поочередного воспроизведения эффектов на множестве наборов элементов мы рассмотрим другие способы объединения в очередь методов, не являющихся методами воспроизведения эффектов.

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




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