cpp

Эффекты и анимация

Возможности, которые мы рассмотрим в этой главе, входят только в полную версию библиотеки jQuery и отсутствуют в версии slim. Дело в том, что эффекты и анимация доступны в CSS 3 без использования скриптов. Например, изменим непрозрачность изображения при наведении указателя мыши:

<style>
#img1       { opacity: 0.5; transition: opacity 0.3s ease-out; }
#img1:hover { opacity: 1; }
</style>
…
<img src="img/img_w200h200.jpg" id="img1" alt="">

Допускается изменение значений не только числовых атрибутов, но и некоторых других. Например, плавно изменим цвет фона контейнера при добавлении или удалении стилевого класса:

<style>
.mydiv {
  height: 100px;
  background-color: red;
  transition: background-color 3s ease-in-out;
}
.bg-blue {
  background-color: blue;
}
</style>
…
<div id="div1" class="mydiv"></div>
<input type="button" value="Изменить цвет фона" id="btn1">

$('#btn1').click( function() {
   $('#div1').toggleClass('bg-blue');
});

Эффекты и анимация в jQuery

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

Управление отображением элемента

Для управления отображением элементов предназначены следующие методы:

  • show() — отображает элемент (путем изменения ширины и высоты). Форматы метода:
show([<Продолжительность>, ][<Функция обратного вызова>])
show(<Продолжительность>[, <Закон анимации>][,
     <Функция обратного вызова>])
show(<Объект с опциями>)
  • hide() — скрывает элемент (путем изменения ширины и высоты). Форматы метода:
hide([<Продолжительность>, ][<Функция обратного вызова>])
hide(<Продолжительность>[, <Закон анимации>][,
     <Функция обратного вызова>])
hide(<Объект с опциями>)

Пример сокрытия и отображения первого абзаца при щелчке на кнопке:

<p>Абзац</p>
<input type="button" value="Скрыть абзац" id="btn1">
<input type="button" value="Отобразить абзац" id="btn2">
$('#btn1').click( function() {
   $('p').first().hide(400);
});
$('#btn2').click( function() {
   $('p').first().show(400);
});
  • toggle() — позволяет чередовать сокрытие и отображение элементов (путем изменения ширины и высоты). Если элемент скрыт, то он будет отображен, и наоборот. Форматы метода:
toggle([<Продолжительность>, ][<Функция обратного вызова>])
toggle(<Продолжительность>[, <Закон анимации>][,
       <Функция обратного вызова>])
toggle(<Объект с опциями>)

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

<p>Абзац</p>
<input type="button" value="Скрыть или отобразить абзац"
       id="btn1">
$('#btn1').click( function() {
   $('p').first().toggle(400);
});
  • toggle(<Условие>) — если в качестве параметра указано значение true, то элемент будет отображен (с помощью метода show()), а если указано значение false, то он будет скрыт (с помощью метода hide()). Действие выполняется без анимации. Пример сокрытия и отображения первого абзаца при щелчке на кнопке:
<p>Абзац</p>
<input type="button" value="Скрыть абзац" id="btn1">
<input type="button" value="Отобразить абзац" id="btn2">
$('#btn1').click( function() {
   $('p').first().toggle(false);
});
$('#btn2').click( function() {
   $('p').first().toggle(true);
});
  • slideDown() — показывает элемент, спуская его сверху вниз (путем изменения высоты). Форматы метода:
slideDown([<Продолжительность>, ][<Функция обратного вызова>])
slideDown(<Продолжительность>[, <Закон анимации>][,
          <Функция обратного вызова>])
slideDown(<Объект с опциями>)
  • slideUp() — скрывает элемент, поднимая его снизу вверх (путем изменения высоты). Форматы метода:
slideUp([<Продолжительность>, ][<Функция обратного вызова>])
slideUp(<Продолжительность>[, <Закон анимации>][,
        <Функция обратного вызова>])
slideUp(<Объект с опциями>)
  • slideToggle() — позволяет чередовать сокрытие и отображение элементов (путем изменения высоты). Если элемент скрыт, то он будет отображен (спущен сверху), и наоборот (поднят снизу вверх). Форматы метода:
slideToggle([<Продолжительность>, ][<Функция обратного вызова>])
slideToggle(<Продолжительность>[, <Закон анимации>][,
            <Функция обратного вызова>])
slideToggle(<Объект с опциями>)

Пример сокрытия и отображения элемента DIV при щелчке на кнопке:

<div id="div1" class="bg-success text-white"
     style="height: 150px; display:none;">
   Скрытый элемент
</div>
<input type="button" value="Отобразить элемент" id="btn1">
<input type="button" value="Скрыть элемент" id="btn2">
<input type="button" value="Отобразить или скрыть элемент"
   id="btn3">
$('#btn1').click( function() {
   $('#div1').slideDown(1000);
});
$('#btn2').click( function() {
   $('#div1').slideUp(1000);
});
$('#btn3').click( function() {
   $('#div1').slideToggle(1000);
});

Если в методах show(), hide() и toggle() параметры не указаны, то сокрытие или отображение элемента будет производиться сразу без анимации. При сокрытии элемента атрибуту display присваивается значение block. При отображении элемента атрибут display удаляется, если его начальное значение было block, или меняется на inline, если оно изначально имело значение inline. Пример сокрытия и отображения первого абзаца без анимации при щелчке на кнопке:

<p>Абзац</p>
<input type="button" value="Скрыть абзац" id="btn1">
<input type="button" value="Отобразить абзац" id="btn2">

$('#btn1').click( function() {
   $('p').first().hide();
});
$('#btn2').click( function() {
   $('p').first().show();
});

Если в методах slideDown(), slideUp() и slideToggle() параметры не указаны, то сокрытие или отображение элемента будет производиться с анимацией изменения высоты в течение 400 миллисекунд:

<p>Абзац</p>
<input type="button" value="Скрыть абзац" id="btn1">
<input type="button" value="Отобразить абзац" id="btn2">

$('#btn1').click( function() {
   $('p').first().slideUp();
});
$('#btn2').click( function() {
   $('p').first().slideDown();
});

В необязательном параметре <Продолжительность> может быть указано время выполнения анимации в миллисекундах или следующие значения в виде строки:

  • fast — 200 миллисекунд;
  • slow — 600 миллисекунд.

Если параметр <Продолжительность> не указан, то по умолчанию используется значение 400 миллисекунд. Скроем все абзацы, указав продолжительность 1000 миллисекунд:

$('p').hide(1000);

Отобразим все абзацы, указав продолжительность 200 миллисекунд:

$('p').show('fast');

Скроем или отобразим все абзацы, указав продолжительность 600 миллисекунд:

$('p').toggle('slow');

В параметре <Закон анимации> можно указать значения swing (значение по умолчанию) и linear (равномерное изменение на всем протяжении действия) в виде строки. Пример указания значения linear:

$('p').toggle('slow', 'linear');

В параметре <Функция обратного вызова> может быть указана функция, которая будет вызвана после окончания анимации. Указывается ссылка на функцию следующего формата:

function <Название функции>() {
   // ...
}

Внутри функции обратного вызова доступен указатель this на текущий DOM-элемент. При щелчке на ссылке вначале скроем ее, а затем по окончании анимации отобразим:

<a href="#">Текст ссылки</a>

$('a').click( function() {
   $(this).slideUp(600, function() {
      $(this).slideDown('slow');
   });
   return false; // Прерываем переход по ссылке
});

В качестве примера сокрытия и отображения элементов создадим меню, в котором можно отобразить не более одного элемента (листинг 2.1).

Листинг 2.1. Сокрытие и отображение элементов

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Сокрытие и отображение элементов</title>
   <style>
   .menu { color: black; }
   .elem { display: none; }
  </style>
</head>
<body>
   <a href="#" class="menu">Отобразить или скрыть элемент 1</a><br>
   <div class="elem">Скрытый элемент 1</div>
   <a href="#" class="menu">Отобразить или скрыть элемент 2</a><br>
   <div class="elem">Скрытый элемент 2</div>
   <a href="#" class="menu">Отобразить или скрыть элемент 3</a><br>
   <div class="elem">Скрытый элемент 3</div>
   <a href="#" class="menu">Отобразить или скрыть элемент 4</a><br>
   <div class="elem">Скрытый элемент 4</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('a.menu').click( function() {
      // Находим элемент, расположенный сразу после ссылки
      var elem = $(this).nextAll('div.elem').first();
      if ( elem.is(':hidden') ) { // Если элемент скрыт
         // Скрываем видимые элементы
         $('div.elem:visible').hide();
         // Отображаем элемент, расположенный сразу после ссылки
         elem.show();
      }
      else {          // Если элемент был отображен ранее
         elem.hide(); // Скрываем элемент
      }
      return false;   // Прерываем переход по ссылке
   });
});
</script>
</body>
</html>

Изначально все элементы DIV, имеющие класс elem, скрыты. При щелчке на ссылке, имеющей класс menu, находим элемент DIV, который следует сразу после ссылки. Далее с помощью метода is() проверяем, является ли элемент скрытым. Если да, то скрываем все видимые элементы DIV, а затем отображаем элемент, а если нет, то просто скрываем его. И, наконец, прерываем переход по ссылке, возвращая значение false.

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp