Управление видимостью (базовые эффекты) в jQuery

Статья, в которой рассмотрим методы jQuery, с помощью которых можно осуществить появления и скрытие элементов.

Методы jQuery для управления видимостью элементов

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

Методы jQuery с помощью которых можно управлять видимостью HTML-элементов на странице можно разделить на 3 основные группы:

• Функции show (показать), hide (спрятать), toggle (переключить состояние из одного положение в другое) выполняют свои действия за счёт одновременного изменения 2 параметров: размеров (ширины и высоты) и прозрачности.
• Функции fadeIn (отобразить), fadeOut (исчезнуть), fadeToggle (в зависимости от текущего состояния видимости, прячет или показывает элемент), fadeTo (изменяет состояние прозрачности элемента на заданное) производят свои действия за счёт изменения прозрачности элемента.
• Функции slideDown (появление элемента), slideUp (исчезновение элемента), slideToggle (отображение или скрытие элемента в зависимости от того, в каком состоянии он сейчас находится) осуществляют своё действие за счёт изменения высоты элемента.

Варианты использования методов jQuery, предназначенных для скрытия и отображения элементов

В jQuery существует три варианта использования методов, предназначенных для появления или исчезнования элементов на странице.

1. .имяМетода([duration][,complete]) - самый простой вызов функции, который можно использовать без параметров, с одним параметром (длительность анимации) или с двумя (первый указывает длительность анимации, а второй - функцию, которую необходимо вызвать после окончания выполнения анимации).

   .show([duration][,complete])
   // show - имя метода
   // параметы в скобках являются не обязательными
   // duration - длительность анимации
   // complete -  функция, которая будет вызвана после завершения анимации
   

   Например, выполним плавное появление блока с идентификатором message с помощью метода show (длительность анимации 1 секунда), а затем скроем его (через 5 секунд после завершения анимации) посредством метода hide:

   $('#message').show(1000, function(){
     setTimeout(function(){
       $('#message').hide(500);
     }, 5000);
   });

2. .имяМетода([duration][,easing][,complete]) - расширенный вариант 1 способа. Кроме задания времени выполнения анимации и параметра complete, можно ещё указавать тип анимации. По умолчанию в качестве типа анимации используется swing.

   .slideUp([duration][,easing][,complete])
   // slideUp - имя метода
   // параметы в скобках являются не обязательными
   // в этом варианте появился ещё один параметр easing - устанавливает скорость протекания анимации
   

   Например, отобразим блок (имеющий класс scrollup) на странице после её прокрутки больше чем на 200px.

   $(window).scroll(function() {
     if ($(this).scrollTop()>=200) {
       // длительность анимации - 'slow'
       // тип анимации -  'linear'
       $('.scrollup').fadeIn('slow','linear');
     }
     else {
       // длительность анимации - 'fast'
       // тип анимации -  'swing'
       $('.scrollup').fadeOut('fast','swing');
     }
   });
   

3. .имяМетода(options) - универсальный вызов функции. Параметры в этот методе задаются в виде свойств и методов объекта (options).

   .fadeIn({
     имяПараметра1: значение,
     имяПараметра2: значение,
     имяПараметра3: значение,
     ...
   })
   // fadeIn - имя метода
   

   Например, напишем JavaScript код, который будет скрывать элемент при клике:

   $('pressme').click(function() {
     $(this).slideUp({
       duration: 'slow',
       easing: 'linear'
     });
   });
   

Виды параметров, которые можно указывать универсальному вызову метода.имяМетода(options):

• duration - параметр, определяющий длительность выполнения анимации в миллисекундах (число). По умолчанию: 400 мс. Кроме этого данный параметр может принимать следующие строковые значения: 'slow' (медленно), 'normal' (с обычной скоростью), 'fast' (быстро). Тип параметра duration: Number или String.
• easing - параметр, содержащий строковое название функции (по умолчанию 'swing'), которая будет использоваться для задания скорости выполнения анимации в различных точках. В ядре библиотеки jQuery доступны только 2 функции easing: linear (с постоянной скоростью) и swing (скорость выполнения анимации в начале и конце меньше чем в середине, т.е. медленно -> быстро -> медленно). Тип параметра easing: String.
• complete - параметр, содержащий функцию, которую необходимо вызвать после окончания выполнения анимации. Тип параметра complete: Function().
• step - параметр, указывающий функцию, которая будет вызываться перед выполнением каждого кадра анимации. Внутри функции кроме параметра содержащей номер текущего кадра, будет доступен ещё и объект анимации Tween. Это означает то, что вы можете изменить свойства анимации (т.е. свойства объекта Tween) перед тем как они будут установлены. Тип параметра step: Function (Number now, Tween tween).
• queue - логический параметр с помощью которого можно указать необходимо ли помещать анимацию в очередь. По умолчанию анимация в jQuery выполняется последовательно друг за другом, т.е. новая анимация не начнёт выполняться пока не завершиться предыдущая. Если указать в качестве значения этого параметра значение false, то она начнёт выполняться немедленно, т.е. она не будет помещаться в очередь. Начиная с версии jQuery 1.7 данный параметр в качестве значения также может принимать строку (название очереди). В этом случае анимация не будет запускаться автоматически. Чтобы её запустить необходимо будет вызвать функцию dequeue и указать ей в качестве параметра имя очереди: .dequeue("queuename"). Тип параметра queue: Boolean или String.
• specialEasing - параметр, который позволяет задать различным CSS свойствам разные функции easing. Задается указанный параметр в формате объекта: {CSS-свойство1: easing-функция; CSS-свойство2: easing-функция ... }. Тип параметра specialEasing: PlainObject.
• progress - параметр, содержащий функцию, которая будет вызываться после завершения каждого кадра анимации. Тип параметр progress: Function(Promise animation, Number progress, Number remainingMs).
• start - параметр, содержащий функцию, которая вызывается когда элемент начинает анимацию. Тип параметра start: Function (Promise animation).
• done - параметр, содержащий функцию, которая вызывается когда элемент завершил анимацию. Тип параметра done: Function (Promise animation, Boolean jumpedToEnd).
• fail - параметр, содержащий функцию, которая вызывается только тогда когда выполнение анимации не доходит до конца, т.е. завершается неудачей. Тип параметра: Function (Promise animation, Boolean jumpedToEnd).
• always - параметр, содержащий функцию, которая будет вызвана в момент завершения анимации или её остановки без окончания. Тип параметра always: Function (Promise animation, Boolean jumpedToEnd).

Метод для изменения прозрачности fadeTo

Метод fadeTo отличается от методов show, hide, toggle, fadeIn, fadeOut, fadeToggle, slideDown, slideUp и slideToggle тем, что он предназначен не для скрытия или отображения элементов, а для изменения их прозрачности. Поэтому в отличие от этих методов у него есть дополнительный обязательный параметр opacity. Этот параметр задаёт степень непрозрачности, который необходимо установить выбранным элементам. Задаётся данный параметр посредством числа от 0 до 1. Число 0 – устанавливает полную (100%) прозрачность элемента, а 1 - полную его не прозрачность. Кроме этого методу fadeTo в отличие методов скрытия или отображения элементов необходимо обязательно также задавать длительность выполнения анимации.

Синтаксис использования метода fadeTo:

// 1 вариант
.fadeTo( duration, opacity [, complete ] )
// 2 вариант
.fadeTo( duration, opacity [, easing ] [, complete ] )

Внимание: Метод fadeTo в отличие от методов скрытия и отображения элементов не может принимать в качестве значения параметра объект.

Например, медленно изменим прозрачность текста (содержимое элемента p с классом lead) при поднесении к нему курсора:

$('p.lead').hover(
  function(){
    $(this).fadeTo('slow',0.5);
  },
  function(){
    $(this).fadeTo('normal',1);
  }
);