Метод анимации animate библиотеки jQuery

Описание метода animate

Метод animate, выполняющий плавное изменения CSS-свойств элементов, имеет два варианта использования :

1. animate(properties, [duration], [easing], [callback])
• properties – список анимирующих CSS-свойств, их конечные значения;
• duration – продолжительность выполнения анимации, измеряемая в миллисекундах или определяемая строковыми значениями 'fast' (200 мс), 'slow' (2600 мс);
• easing – изменение скорости анимации с замедлением к концу выполнения или ускорением;
• callback – функция обратного вызова, вызываемая после завершения анимации.
2. animate(properties, options)
• properties – список анимирующих CSS-свойств, их конечные значения;
• options – дополнительные опции в формате ключ:значение; варианты опций:
• duration – продолжительность выполнения анимации, измеряемая в миллисекундах или определяемая строковыми значениями 'fast' (200 мс), 'slow' (2600 мс);
• easing – изменение скорости анимации с замедлением к концу выполнения или ускорением;
• complete – вызываемая после завершения анимации функция;
• step – вызываемая после каждого шага анимации функция;
• queue – логическое значение, указывающее на необходимость включения текущей анимации в очередь функций (при значении false анимация стартует сразу же, т.е. без включения в очередь);
• specialEasing – позволяет установить разные значения easing для разных CSS-параметров, определяется в формате ключ:значение (добавлена в jQuery 1.4).

Анимация CSS-свойств элементов

Рассмотрим следующий пример простейшей анимации css-свойств элементов методом animate :

Скрыть код примера

<h3>Пример анимации CSS-свойств</h3>

<p id="first">Текст 1-го абзаца
    (<span style="font-style:italic;font-size:0.8em">
	    анимация : padding, border</span>)</p>
<p id="second">Текст 2-го абзаца 
    (<span style="font-style:italic;font-size:0.8em">
	  анимация наведением курсора на текст</span>).</p>

<p id="third">Текст 3-го абзаца 
    (<span style="font-style:italic;font-size:0.8em">
	  анимация : opacity, height</span>)</p>

<script>
$(document).ready(function(){
    // анимация первого абзаца
    $('p').filter('#first').animate({
        padding: '10px',
        borderBottom: '1px solid color:#eee',
        borderLeft: '1px solid color:#eee'
    }, 2000);
    // анимация второго абзаца
    $('p').filter('second').hover(function() {
        $(this).animate({paddingLeft:'+=15px'}, 500);
    }, function() {
        $(this).animate({paddingLeft:'-=15px'}, 500);
    });
    // анимация третьего абзаца
    $('p').filter('#third').animate({
        opacity: 'hide',
        height: 'hide'
    }, 'slow');
});
</script>

Изменение скорости анимации, easing

В следующем примере в метод animate после описания CSS-свойств properties и времени duration включен параметр easing (linear, swing), определяющий характер скорости анимации. Значение linear определяет равномерную анимацию в течение всего времени. Значение swing определяет неравномерную анимацию : медленное изменение в начале, после чего скорость анимации возрастает, и замедление на конечном этапе анимации. В качестве CSS-свойства в примере используется размер шрифта fontSize.

Скрыть код примера

<h4>Пример изменения скорости анимации</h4>

<p id="easing">Текст абзаца 
    (<span style="font-style:italic;font-size:0.8em">
         анимация : fontSize, easing</span>)</p>
<input type="button" id ="btnFont" value="Увеличить шрифт" 
            style="width:180px" />

<script type="text/javascript">
$(document).ready(function() {
   $('#btnFont').click(function() {
      $('p').filter('#easing').toggleClass('easing');
      if ($('p').filter('#easing').hasClass('easing')) {
         $('p').filter('#easing')
               .animate({fontSize:'+=1.1em'}, 
                  3000, 'linear', 
                  function() {
                      $('#btnFont').val('Уменьшить шрифт');
                  }
                );
      } else {
         $('p').filter('#easing')
               .animate({fontSize:'-=1.0em'},
                  3000, 'swing', 
                  function() {
                      $('#btnFont').val('Увеличить шрифт');
                  }
                );
      }
   });
});
</script>

В представленном примере анимация стартует после нажатия на кнопку. Сначала к элементу абзаца 'easing' добавляется класс методом toggleClass; при повторном нажатии кнопки класс удаляется. Методом hasClass проверяется наличие определенного класса у элемента. Если класс присутствует, то размер шрифта увеличивается методом animate. В противном случае размер шрифта уменьшается. После завершения анимации вызывается callback-функция, передаемая методу animate последним параметром, которая изменяет текст кнопки. Далее представлена реализация примера.

Реализация примера изменения скорости анимации

Следующий блок демонстрирует описанный выше пример в действии. Анимация выполняется после нажатия на кнопку. Скорость увеличения шрифта линейная, а при восстановлениии шрифта используется easing='swing', т.е. замедленные начало и завершение, а в середине скорость анимации повышенная.

Анимация подсветкой

Анимация подсветкой, или, иначе называемая, цветовая анимация, предполагает изменения цвета шрифта и/или фона элемента. В отличие от рассмотренных выше анимаций, связанных с изменением отступов, прозрачности, размера шрифта, значения которых изменяются линейным способом, для цветовой анимации требуются дополнительные вычисления трех взаимосвязанных значений RGB (red-green-blue) плюс прозрачность, чтобы перевести значения из начального цвета в конечный. В основной библиотеке jQuery функций вычисления цветов нет, поскольку большинству проектов подобная функциональность не требуется. Но данная функциональность присутствует в библиотеке jquery-ui.js, связанной c пользовательским интерфейсом UI (User Interface). В следующем примере мы загрузим на страницу данную библиотеку и рассмотрим анимацию элементов DOM подсветкой шрифта и фона.

В примере загрузка библиотек jquery-1.12.4.js и jquery-ui.js выполняется в первых строках секции <body>. Это работает. Но правильнее было бы, если бы загрузка библиотек помещалась бы в секции заголовка <head>.

Скрыть код примера

<body>
<!-- Загрузка библиотек -->
<script src="https://code.jquery.com/jquery-1.12.4.js"gt;
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>

<h3>Анимация элемента подсветкой</h3>
<p id="color">Текст абзаца 
  (<span style="font-style:italic;font-size:0.8em">
      анимация : backgroundColor, color, padding</span>)</p>

<input type="button" id ="btnClr" value="Включить подсветку"
       style="width:180px" />

<script type="text/javascript">
   $(document).ready(function() {
      $('#btnClr').click(function() {
         // добавление элементу класса color
         $('p').filter('#color').toggleClass('color');
         // проверка у элемента класса color
         if ($('p').filter('#color').hasClass('color')) {
              // выполнение цветовой анимации
              $('p').filter('#color')
                    .animate(
                        {backgroundColor:'#eeddee',
                         color:'#2244ff',
                         padding:'5px'}, 1000);
              $('#btnClr').val('Выключить подсветку');
         } else {
              // восстановление 'состояния' элемента
              $('p').filter('#color')
                    .animate(
                        {backgroundColor:'#d0fdff',
                        color:'black',
                        padding:'0px'}, 1000);
              $('#btnClr').val('Включить подсветку');
         }
      });
  });
</script>

</body>
 

Интерфейс примера анимации подсветкой, представленный ниже, включает заголовок, текст из одного абзаца и кнопку, нажатием на которую выполняется цветовая анимация : изменяется фоновый цвет backgroundColor, цвет шрифта color и отступы от границ абзаца padding. Время анимации составляет 1000 мс. При повторном нажатии состояние абзаца «восстанавливается». Текст кнопки отражает наименование предстоящей анимации. Обратите внимание, что, текст кнопки изменяется одновременно со стартом анимации. Чтобы текст кнопки изменялся после завершения анимации необходимо использовать callback-функцию.

Реализация примера анимации подсветкой