JQuery UI API - цвет анимации (цвет анимации)
Ядро JQuery UI добавляет специальные эффекты с помощью rgb() , rgba() , шестнадцатеричные значения или имена цветов , таких как "aqua" , чтобы динамически изменять функции цветовых атрибутов. Только вам необходимо включить JQuery UI эффекты файл ядра, .animate() будет поддерживать цвет.
Он поддерживает следующие атрибуты:
-
backgroundColor -
borderBottomColor -
borderLeftColor -
borderRightColor -
borderTopColor -
color -
columnRuleColor -
outlineColor -
textDecorationColor -
textEmphasisColor
Поддержка цвета анимации с JQuery плагин Color . Цвет плагин обеспечивает ряд функций для цвета. Чтобы просмотреть полный текст документа, посетите документы Jquery цвета .
Анимация Класс (Class Анимации)
Несмотря на то, что можно анимировать цвет непосредственно атрибуты, но, как правило, лучше альтернативный метод, который содержит стили в классе. JQuery UI предоставляет методы для динамически добавлять или удалять классы CSS, а именно .addClass() , .removeClass() , .toggleClass() и .switchClass() . Эти методы будут автоматически определить, какие необходимо изменить свойства и что необходимо применить соответствующую анимацию.
примеров
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Название> Цвет Анимация (цвет анимации) Demo </ title>
<Link отн = "таблица стилей" HREF = "http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Style>
#elem {
цвет: # 006;
цвет фона: #aaa;
размер шрифта: 25px;
обивка: 1em;
выравнивания текста: центр;
}
</ Style>
<Script SRC = "http://code.jquery.com/jquery-1.10.2.js"> </ скрипт>
<Script SRC = "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
<Div ID = "элем"> Цвет Анимация </ DIV>
Кнопка <ID = "переключение"> изменение цвета </ кнопка>
<Script>
$ ( "#toggle") .click (Функция () {
$ ( "#elem") .animate ({
Цвет: "зеленый",
BackgroundColor: "RGB (20, 20, 20)"
});
});
</ Script>
</ Body>
</ HTML>