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

Вот пример той анимации, которая мне была нужна:

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Естественно всё началось с подключения популярной библиотеку jQuery, но метод jQuery.animate(), на который я так расчитывал, плавно анимировать цвета упорно не хотел.

Решение этой задачи можно разделить на два шага.

Шаг 1. Анимирование цвета с помощью jQuery UI.

По умолчанию, метод jQuery.animate() не может проанимировать плавное изменение цвета. Чтобы эту неприятность устранить, нам понадобиться библиотека jQuery UI.

Вся библиотека достаточно большая и целиком она нам не нужна. Благо она разбита на модули и собрать собственную сборку можно прямо на странице загрузки.

Оставить галочку можно только напротив Effects Core. Именно этот модуль расширяет нужный нам метод jQuery.animate(), достаточно просто подключить скачанную сборку:

<script type="text/javascript" src="jquery-ui-1.8.22.custom.min.js"></script>

После этого для анимации доступны цвет текста, рамки или фона любого элемента страницы.

Шаг 2. Задержка между анимацией элементов.

Теперь когда с анимацией всё в порядке, есть вторая особенность, усложняющая задачу — сделать задержку между анимацией элементов коллекции.

Допустим у нас есть коллекция элементов нумерованного списка:

var $elements = $('ol > li');

Анимация каждого следующего элемента коллекции должна начинаться с определенной задержкой после предыдущей.

Достичь необходимого результата можно при помощи следующего кода:

for (var i = 0; i < $elements.length; i++) {
  setTimeout(function(i) {
    return function() {
      $($elements[i])
        .animate({color: '#FA4141'}, 200)
        .delay(100)
        .animate({color: '#4D4D4D'}, 200)
    }
  }(i), i * 150);
}

Обратите внимание, что в setTimeout() первым параметром передается функция, возвращающая другую функцию.

Если этого не сделать, то переменная i будет передана по ссылке и когда наступит время выполнения функции по таймеру, i будет иметь свое последнее значение равное $elements.length, так как к этому моменту цикл for уже закончиться и анимация не будет выполнена вообще.

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

Выводы

Использовать такую анимацию можно, например, чтобы показать, что в каком-нибудь списке параметров нужно обязательно выбрать хотя бы один или просто для привлечения внимания к какому-то блоку страницы.

Вот собственно и всё :).

Рассказать друзьям: