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

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

    И последнее замечание, касающееся поочередного воспроизведения эффектов для одного набора элементов: очередность выполнения не соблюдается автоматически для других методов, не являющихся методами воспроизведения эффектов, таких как .css(). Предположим, что необходимо изменить цвет фона элемента <div id="switcher"> на красный после воспроизведения эффекта .slideUp(), но перед эффектом .slideDown(). Мы могли бы попытаться реализовать это так, как показано ниже:

$(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')
      .css('backgroundColor', '#f00')
      .slideDown('slow');
  });
});

Рис.1. Изменение порядка выполнения эффектов

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

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

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




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