Лучшее руководство по Jquery Примеры UI - цвет анимации (цвет анимации) в 2024 году. В этом руководстве вы можете изучить Аниме (анимация) Demo,
Используйте .animate () для достижения цветовой анимации.
Для получения дополнительной информации о цветовой анимации (цвет анимации) Подробнее см API документация анимации цвета (цвет анимации) .
JQuery UI в комплекте JQuery плагин Color, Color JQuery плагин обеспечивает анимацию цвета и многие другие цвета, связанные вспомогательные функции.
Нажмите кнопку для предварительного просмотра эффектов.
<! 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>