Animate background jquery color: Color Animation | jQuery UI

цветная анимация | Документация 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() . Эти методы автоматически определят, какие свойства необходимо изменить и применить соответствующие анимации.

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

Использование цветной анимации — видеоруководство по jQuery

Из курса: Изучение jQuery UI

Использование цветной анимации

“

- Основная библиотека jQuery, на которой построен пользовательский интерфейс jQuery, предоставляет функцию анимации, которая позволяет вам анимировать определенные свойства CSS для элементов на странице. К сожалению, он не позволяет анимировать цвета, что в наши дни является довольно распространенным явлением. Пользовательский интерфейс jQuery поставляется с подключаемым модулем jQuery Color по умолчанию. Это позволяет вам анимировать цвета, что я покажу вам, как это сделать в этом фильме. Здесь в фрагментах я прокрутил вниз до раздела «Цветная анимация» и давайте откроем ColorAnim_start. Давайте просто продолжим и запустим это в браузере. Вы можете видеть в моем браузере, что у меня есть div, и к нему прикреплен набор цветов. Цвет фона светло-голубой. Цвет текста черный. У него есть граница сероватого цвета снаружи. Мы собираемся анимировать эти цвета из одного набора в другой. Для этого давайте перейдем к коду, и в фрагментах скопируем этот первый пример прямо сюда, и мы вставим его в мою функцию готовности документа здесь, в примере. Когда пользователь нажимает на эту кнопку, кнопку anim1, у меня есть обработчик событий, который будет обрабатывать нажатие этой кнопки. Он вызовет функцию анимации в моем примере элемента div.