15. Введение в jQuery

Средства анимации

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

Показать/скрыть иллюстрацию

Например, в реальной жизни мы не привыкли к мгновенному появлению или исчезновению объектов. Логично перенести постепенность и на гипертекстовые страницы. Такой подход вводит привычные (по реальной жизни) переходы из одного состояния в другое, а значит, повышает комфорт интерфейса.

Для показа/скрытия элементов на странице jQuery предлагает методы show, hide и toggle. Последний метод показывает элементы из обертки, если они были скрыты и скрывает их, если они присутствовали на странице.

Конечно, эти методы используют стилевое свойство display, устанавливая его в none, чтобы скрыть элемент. Но методы show, hide и toggle позволяют включить анимацию, моделирующую постепенность исчезновения/появления элемента.

hide(speed,callback)
Скрывает элементы обертки.
  • speed — число или строка. Необязательный аргумент, определяющий скорость пропадания элемента. Может быть числом миллисекунд или одной из строковых констант: "slow", "normal", "fast".
  • callback — функция. Необязательный аргумент. Будет вызвана по окончанию работы эффекта.

При вызове без аргумента speed элементы пропадают с экрана мгновенно (простой установкой свойства display в none). Если задан аргумент speed, элементы исчезают постепенно за счет уменьшения в размерах и уменьшения непрозрачности до нуля.


show(speed,callback)
Показывает элементы обертки.

Свойство display устанавливается в первоначальное значение (inline или block), если элемент был скрыт средствами jQuery, иначе в block.


toggle(speed,callback)
Показывает элементы обертки.

Для скрытых элементов обертки выполняет show, для видимых — hide.

Пример 06 использует метод toggle. Элемент DIV с id="block" плавно пропадает и появляется по нажатию на кнопку BUTTON: 


  <BODY>
    <H1>Анимация jQuery</H1>

    <FIELDSET>
      <LEGEND>toggle("slow")</LEGEND>
      <P><BUTTON>Выполнить</BUTTON></P>
      <DIV id="block">
Сидят чудовища кругом:
Один в рогах с собачьей мордой,
Другой с петушьей головой,
Здесь ведьма с козьей бородой,
Тут остов чопорный и гордый,
Там карла с хвостиком, а вот
Полужуравль и полукот.

(<EM>A. C. Пушкин</EM>)
      </DIV>
    </FIELDSET>
  </BODY>

Управляющий скрипт имеет вид: 


// Обработчик готовности DOM
$(function ()
{
  // Обработчик щелчка на кнопке
  $("button").click(function () 
  {
    $("#block").toggle("slow");
  });    
});

Построим еще один пример, в котором реализован раскрывающийся список.

Постановка задачи
Обеспечить вложенные списки на странице следующим поведением. В начальный момент скрыть все вложенные списки, обеспечив их раскрытие щелчком на специальном маркере (подобно тому, как раскрываются папки в Проводнике Windows).

Решение
Будем погружать списки с раскрытием в блок DIV с классом tree. Никаких других визуальных и поведенческих разметок в HTML-коде записывать не будем. Вот пример такого списка: 


<DIV class="tree">
   <UL>
     <LI>Пункт 1
       <UL>
         <LI>Пункт 1.1
         <LI>Пункт 1.2
         <LI>Пункт 1.3
       </UL>
     <LI>Пункт 2
       <UL>
         <LI>Пункт 2.1
         <LI>Пункт 2.2
           <UL>
             <LI>Пункт 2.2.1
             <LI>Пункт 2.2.2
             <LI>Пункт 2.2.3
          </UL>
         <LI>Пункт 2.3
       </UL>
   </UL>
</DIV>

Посмотрите страницу с двумя подобными списками.

Приведенный выше список в начальный момент должен отображаться в виде:

Раскрытие вложенного списка будет выполняться щелчком на специальном маркере, в качестве которого будем использовать символ с кодом &#9658; (стрелочка вправо). В раскрытом списке маркер меняется на символ &#9660; (стрелочка вниз). Щелчок по такому маркеру снова скроет вложенный список.

Ниже приводится код, который реализует описанное выше поведение: 


// Обработчик готовности DOM
$(function ()
{
  // В начало содержимого каждого LI, который содержит UL (вложенный
  // список) вставить символ раскрытия списка, снабдив его классом node.
  // А сам элемент UL (начало вложенного списка) скрыть, снабдив его 
  // стилем "display:none".
  $('.tree li:has(ul)').prepend('<SPAN class="node">&#9658;</SPAN>')
     .children('ul').css('display','none');
     
  // На все значки-символы раскрытия списка навесить обработчик щелчка
  $('.tree .node').click(function () 
  {
    var x = $(this); // Обернем символ раскрытия списка методами jQuery
    // Подготовим символ, противоположный текущему 
    var sym = (x.html().charCodeAt(0) == 9658) ? '&#9660;' : '&#9658;'
    // Сменим символ и скроем/покажем список с анимационным эффектом 
    x.html(sym).nextAll('ul').toggle('normal');
  }); 

});

Дополнительные комментарии

Таким образом, HTML код изменится с: 


<LI>Пункт 1
  <UL>
на 


<LI><SPAN class="node">&#9658;</SPAN>Пункт 1
  <UL>

Инструкция продолжается дальше:

Далее в коде определяется обработчик щелчка, выполненного на элементе с классом node: 


  $('.tree .node').click(function () 
  {
    ...
  });

Внутри этого обработчика:

  1. Элемент, на котором выполнен щелчок, превращается в обертку jQuery: 

    
var x = $(this); // Обернем символ раскрытия списка методами jQuery

  2. Готовится символ на замену текущему: 

    
// Подготовим символ, противоположный текущему 
var sym = (x.html().charCodeAt(0) == 9658) ? '&#9660;' : '&#9658;'

  3. Заменяется символ и выполняется скрытие/раскрытие вложенного списка при помощи метода toggle с анимационным эффектом, выполняемым с нормальной скоростью: 

    
// Сменим символ и скроем/покажем список с анимационным эффектом 
x.html(sym).nextAll('ul').toggle('normal');

    Метод nextAll получает список всех сестринских узлов, идущих за данным, а дополнительный аргумент-селектор 'ul' выделяет среди них узел UL (вложенный список).

Пример 07 содержит полные коды. Заметим, что вместо символов &#9660; и &#9658; можно было использовать символы - и + или соответствующие картинки.

Наряду с рассмотренными методами show и hide в библиотеке есть похожие методы fadeOut, fadeIn и fadeTo.

Методы fadeOut и fadeIn работают так же, как show и hide, но при построении анимационного эффекта воздействуют только на прозрачность элемента не меняя его в размерах. Метод fadeTo тоже меняет степень непрозрачности элементов из обертки от текущего до заданного вторым аргументом значения.

Рассмотрим еще три анимационных метода, которые скрывают или показывают элементы из обертки «выкатывая» их из-под верхней границы или «закатывая» элементы под неё.

slideDown(speed,callback)
Элемент становится видимым, «выезжая» из-под верхней границы.
  • speed — число или строка. Необязательный аргумент, определяющий скорость появления элемента. Может быть числом миллисекунд или одной из строковых констант: "slow", "normal", "fast". По умолчанию аргумент имеет значение "normal".
  • callback — функция. Необязательный аргумент. Будет вызвана по окончанию работы эффекта.

При вызове без аргумента speed элементы пропадают с экрана мгновенно (простой установкой свойства display в none). Если задан аргумент speed, элементы исчезают постепенно за счет уменьшения в размерах и уменьшения непрозрачности до нуля.


slideUp(speed,callback)
Элемент становится невидимым, «въезжая» под верхнюю границу.
  • speed — число или строка. Необязательный аргумент, определяющий скорость появления элемента. Может быть числом миллисекунд или одной из строковых констант: "slow", "normal", "fast". По умолчанию аргумент имеет значение "normal".
  • callback — функция. Необязательный аргумент. Будет вызвана по окончанию работы эффекта.

При вызове без аргумента speed элементы пропадают с экрана мгновенно (простой установкой свойства display в none). Если задан аргумент speed, элементы исчезают постепенно за счет уменьшения в размерах и уменьшения непрозрачности до нуля.


slideToggle(speed,callback)
Выполняет команду slideDown для скрытых элементов и slideUp для видимых.

Но базе последнего метода построим пример с интерфейсом «гармошка».

Гармошка («гармоника», «аккордеон», «баян») — элемент интерфейса для одновременного отображения только одной внутристраничной панели (инлея) из нескольких предусмотренных. Когда активизируется новый инлей гармошки, он разворачивается, а старый сворачивается.

В HTML-коде построим гармошку следующим образом: 


     <DIV class="accordion">

      <H3>Заголовок первой панели</H3>
       <DIV>
... содержимое первой панели 
       </DIV>
...
      <H3>Заголовок последней панели</H3>
       <DIV>
... содержимое первой панели 
       </DIV>

     </DIV>

То есть гармошка погружена в блок DIV с классом accordion и представляет собой набор пар H3 плюс DIV. Элемент H3 содержит заголовок панели (в начальный момент только заголовки и видны на экране), а тело панели погружено в DIV и представляет собой инлей, который открывается по щелчку на заголовке.

Скрипт для этого примера позаимствован (с небольшими переделками) со страницы anton.shevchuk.name/javascript/jquery-for-beginners (jQuery для начинающих). Оригинальная статья на английском — ссылка.

Вот этот скрипт: 


// Обработчик готовности DOM
$(function ()
{
  // Назначим смену фона при пересечении курсором заголовка панели
  // (реагирование заголовка панели при попадании на нее указателя) 
  $(".accordion > h3").hover(
       function () {$(this).css("background-color", "#e3e2e2")},
       function () {$(this).css("background-color", "#e9e7e7")});
  
  // Спрячем тела всех панелей (оставим на виду только заголовки) 
  $(".accordion > div").hide();

  // Обработчик щелчка на заголовке панели
  $(".accordion > h3").click(function()
  {
    // Покажем/спрячем текущую панель
    // и спрячем ту из панелей-сестёр, которая видна в данный момент
    $(this).next("div").slideToggle("slow")
      .siblings("div:visible").slideUp("slow");
    // Поставим/удалим класс "active" на текущей панели
    $(this).toggleClass("active");
    // Удалим класс "active" на всех сестринских панелях
    $(this).siblings("h3").removeClass("active");
  });

});

Пояснения

Внутри последнего обработчика:

Обратите внимание, стрелочка на заголовке панели выводится при помощи фоновой картинки, заданной в стилевом файле: 


.accordion H3 
{
  background: #e9e7e7 url(pic/arrow.gif) no-repeat right -51px;
  ...
}

Изображение arrow.gif содержит обе стрелочки:

Стрелочка, смотрящая вниз (для нераскрытой панели) на рисунке расположена снизу и показывается на экране при помощи смещения фонового рисунка вверх указанием -51px (верхняя стрелочка не видна).

Для заголовка раскрытой панели предусмотрено другое правило: 


.accordion H3.active 
{
  background-position: right 5px;
}

Здесь фоновый рисунок смещен вниз на 5 пикселов, нижняя стрелочка выходит за пределы заголовка и становится невидимой. Когда панель схлопывается, класс active у её заголовка удаляется и снова начинает работать общее правило .accordion H3 — возвращается стрелочка, смотрящая вниз.

Пример 08 содержит полные коды построенного приложения.

Кроме описанных выше анимационных методов, обертка jQuery содержит метод animate, позволяющий создавать свои собственные анимационные эффекты. Вот краткое описание этого метода:

animate(properties, duration, easing, callback)
Применяет анимационный эффект, заданный параметрами properties и easing, ко всем элементам обёртки.
  • properties — объект. Задает конечные значения CSS-свойств, которые должны быть достигнуты по завершению анимации. Значения соответствующих свойств будут меняться от текущих значений до тех, которые заданы в properties. Например, properties может быть задан в виде объекта {left:0}, и тогда текущее значение left будет меняться до нуля.
  • duration — число или строка. Необязательный аргумент, определяющий скорость анимации. Может быть числом миллисекунд или одной из строковых констант: "slow", "normal", "fast". По умолчанию эффект не производится и конечные свойства, заданные в properties достигаются мгновенно.
  • easing — строка. Необязательный аргумент. Имя функции, выполняющей переходы в анимации. Это может быть функция пользователя или одна из двух предопределенных функций jQuery: linear — линейный переход, swing — колебательный переход с ускорением в конце анимации.
  • callback — функция. Необязательный аргумент. Будет вызвана по окончанию работы эффекта.

Рассмотрим пример использования этого метода, позаимствованный (с небольшими переделками) из книги Бер Бибо, Иегуда Кац «jQuery. Подробное руководство по продвинутому JavaScript».

Постановка задачи
Щелчок по любой картинке на странице должен приводить к "падению" картинки вниз и исчезновению её со страницы.

Решение
Решение содержит пример 09.