Jquery animate css: .animate() | jQuery API Documentation

цветная анимация | Документация jQuery UI API

Ядро эффектов jQuery UI добавляет возможность анимировать свойства цвета с помощью rgb() , rgba() , шестнадцатеричные значения или даже названия цветов, например "aqua" . Просто включите Основной файл jQuery UI эффектов и .animate() получит поддержку цветов.

Поддерживаются следующие свойства:

• backgroundColor
• границаБоттомЦвет
• borderLeftColor
• границаRightColor
• граница TopColor
• цвет
• столбецRuleColor
• контурЦвет
• textDecorationColor
• textEmphasisColor

Поддержка цветной анимации исходит от Плагин JQuery Color. Плагин цвета предоставляет несколько функций для работы с цветами. Для полной документации, пожалуйста см. документацию jQuery Color.

Хотя существуют варианты использования прямой анимации отдельных свойств цвета, часто является лучшим подходом для содержания стилей в классе. Пользовательский интерфейс jQuery предоставляет несколько методов, которые будут анимировать добавление или удаление класса CSS, в частности .addClass() , .removeClass() , .toggleClass() и .switchClass() . Эти методы автоматически определят, какие свойства необходимо изменить и применить соответствующие анимации.

 
    
 
    
 
  <Голова>  
 
   2 
   
 
    jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">  
 
  <стиль>  
 
  #elem {  
 
  цвет: #006;  
 
  background-color: #aaa;  
 
  размер шрифта: 25px;  
 
  набивка: 1em;  
 
   выравнивание текста: по центру;  
 
    
 
    
 
    
 
    
 
    
 
  
 Цветовая анимация 
  
 
  <Кнопка> Анимат   
 
  
  2 2  2 2   $( "#toggle" ). click(function() {  
 
  $( "#elem" ).animate({  
 
  color: "green",  
 
  backgroundColor: "rgb( 20, 20, 20 )"  
 
  
   
 
    
 
    
 

26 Текстовые анимации и эффекты jQuery

Коллекция бесплатных текстовых анимаций и эффектов jQuery примеров кода от Codepen и GitHub.

1. Текстовые анимации CSS

О коде

Не машет, а тонет

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: gsap.js

О коде

Движение мыши Анимированная вставка text-shadow

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Эффект обрезки анимированного текста CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О коде

Это иллюзия

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: jquery. lettering.js

О коде

Текстовый эффект - панк-рок

Коллекция крутых текстовых эффектов CSS!

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: -

С код

Привет, мир — эффект случайного воспроизведения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Пульсирующая 3D-типография Thingy

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: tweenmax.js

О коде

Анимация маски с помощью GSAP и SVG

Ползунок из трех слов с переходами Greensock, SVG и маски.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: swiper.css, tweenmax.js, swiper.js

О коде

Настраиваемая текстовая анимация

Настраиваемая текстовая анимация, постепенно добавляемая с помощью jQuery и анимированная с помощью анимации ключевых кадров CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

О коде

Эффект наведения фокуса на текст

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Отображение разделенного текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: -

О коде

jQuery Break/Animate Деформация параграфа текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Кинетический тип с Greensock

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: Foundation. css, tweenmax.js

О коде

Глючный текст

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Анимация текста SVG

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: -

О коде

Передача: анимация светящегося текста

Небольшая анимация светящегося текста. Во-первых, несколько js для переноса каждой буквы в диапазон. Затем анимация по ключевым кадрам с миксином с задержкой анимации последовательно освещает каждую букву.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Пузырящийся текстовый эффект

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: нет

Зависимости: -

О коде

Разрушающая текстовая анимация

Текстовая анимация GSAP. Разрушение пути SVG. Медленное движение при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: tweenmax.js

О коде

Красочная текстовая анимация

Гибкий и настраиваемый модуль цветной текстовой анимации, созданный с помощью SCSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Набор текста Thingamy

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Обводка текста CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: tweenmax.js

С код

Фон текстовой маски перемещается при перемещении мыши

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: -

О коде

Ввод текста с помощью JavaScript

Ответ: нет

Зависимости: -

О коде

Тень текста CSS

Продвинутые типографские приемы с использованием lettering.