Анимированные элементе HTML на JQuery

jquery javascript

Как добавить элементу HTML на странице анимацию цвета, обводки, размера, положения и т.д.?

Добавить анимацию элементам можно при помощи свойства transition в стилях CSS. Также для этого можно воспользоваться библиотекой JQuery. Рассмотрим пример:

<script>
(function () {
$('.selector')
    .animate({backgroundColor: "#060"}, 1000)
    .animate({backgroundColor: "#950112"}, 1000, arguments.callee);
}());
</script>

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

(function(){ ... }());

При помощи селектора $('.selector') мы выбираем HTML элементы, к которым хотим применить анимацию. В данном примере мы выбирает все элементы с class="selector".

Далее при помощи свойства animate() мы добавляет анимацию на выбранное свойство. В данном случае мы "вешаем" анимацию на задний фон - backgroundColor - со значения установленного в таблице стилей CSS до указанного в animate() - #060. Т.е. первый оператор является свойством, а второй значением этого свойства. Также есть еще свойство - 1000 - это дилительность анимации в мкс. 

После этого мы вызываем второй раз свойство animate(), которое меняет значение свойства с #060 на #950112. Вызов аналогичен первому вызову animate() с одним лишь дополнением - arguments.callee. Зачем он нужен?

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

Таким нехитрым образом мы можем добавить анимацию на любые элементы страницы. Будь то текст, блоки, картинки и т.д.