Цветовая анимация UI
Color Animation
~lt~coment~gt~Нажимайте на кнопку "Toggle", чтобы поочередно изменять внешний вид окошка.~lt~/coment~gt~ ~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt~style~gt~ .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } ~lt~/style~gt~ ~lt~script~gt~ $(function() { $( "#button" ).toggle( function() { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 400 }, 1000 ); }, function() { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 200 }, 1000 ); } ); }); ~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="toggler"~gt~ ~lt~div id="effect" class="ui-widget-content ui-corner-all"~gt~ ~lt~h3 class="ui-widget-header ui-corner-all"~gt~Animate~lt~/h3~gt~ ~lt~p~gt~ Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~a href="#" id="button" class="ui-state-default ui-corner-all"~gt~Toggle Effect~lt~/a~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Описание
Модуль эффектов jQuery UI расширяет функциональность метода .animate(), обеспечивая возможность плавного изменения цветовых параметров у элементов. А именно:
- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- color
- outlineColor
(необходимо указывать эти параметры именно так, а не через дефис как это делается в соответствующих css-параметрах)
Цвет можно указать в трех различных форматах:
- шестнадцетеричном (#FF0000)
- rgb (rgb(255,255,255))
- и по имени ("black")
Например, чтобы плавно изменить цвет фона у элемента с идентификатором elId на красный, можно использовать следующий код:
$("#elId").animate(backgroundColor: "red", 300); // цвет будет изменен в течении 300 мс (1/3 секунды)