Цветовая анимация UI

Материал из JQuery

Перейти к: навигация, поиск

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="http://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 секунды)