Jquery Примеры UI - цвет анимации (цвет анимации)
Используйте .animate () для достижения цветовой анимации.
Для получения дополнительной информации о цветовой анимации (цвет анимации) Подробнее см API документация анимации цвета (цвет анимации) .
JQuery UI в комплекте JQuery плагин Color, Color JQuery плагин обеспечивает анимацию цвета и многие другие цвета, связанные вспомогательные функции.
Аниме (анимация) Demo
Нажмите кнопку для предварительного просмотра эффектов.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI эффекты - Анимация (Анимация) Demo </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.toggler {ширина: 500px; высота: 200px; положение: относительная;}
#button {утеплитель: .5em 1em; текст-отделка: нет;}
#effect {ширина: 240px; высота: 135px; обивка: 0.4em; положение: относительная; фон: #fff;}
#effect h3 {маржа: 0; обивка: 0.4em; выравнивания текста: центр;}
</ Style>
<Script>
$ (Function () {
переменная состояния = верно;
$ ( "#button") .click (Функция () {
если (состояние) {
$ ( "#effect") .animate ({
BackgroundColor: "# aa0000",
цвет: "#fff",
ширина: 500
}, 1000);
} Else {
$ ( "#effect") .animate ({
BackgroundColor: "#fff",
цвет: "# 000",
ширина: 240
}, 1000);
}
состояние = состояние !;
});
});
</ Script>
</ Head>
<Body>
<Div класс = "Toggler">
<Div ID = "эффект" класс = "UI-виджета-контента UI-краеугольный все">
<H3 класс = "UI-виджет-заголовок UI-краеугольный все"> Аниме (анимация) </ h3>
<P>
Etiam либеро neque, luctus а, eleifend включенные в другие группировки, Semper в, Lorem. Sed Pede. Nulla Lorem Метус, adipiscing ут, luctus СЭД, hendrerit витэ, ми.
</ P>
</ Div>
</ Div>
<a href="#" id="button" class="ui-state-default ui-corner-all"> эффекты переключения </a>
</ Body>
</ HTML>