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

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

    Но как быть, если одновременно с перемещением элемента <div> вправо потребуется сделать его полупрозрачным? Если два анимационных эффекта должны протекать с одной и той же скоростью, их можно просто объединить в одном вызове метода .animate(). Но в данном примере эффект растворения воспроизводится со скоростью 'fast', тогда как эффект перемещения воспроизводится со скоростью 'slow'. В таком случае нам на выручку приходит вторая форма вызова метода .animate():

$(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
      }, {duration: 'slow', queue: false })
      .fadeTo('slow',1.0)
      .slideUp('slow')
      .slideDown('slow');
  });
});

Рис.1. Одновременное выполнение эффектов

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

    Во втором аргументе, который является отображением параметров, допускается указывать параметр queue, который в случае установки в значение false предписывает запустить анимационный эффект одновременно с запущенным ранее.

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




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