Учебники

JqueryUI — Цветная анимация

Январь 2, 2019

jQueryUI расширяет некоторые основные методы jQuery, так что вы можете анимировать различные переходы для элемента. Одним из них является живой метод. jQueryUI расширяет метод анимации jQuery для добавления поддержки анимации цветов. Вы можете анимировать одно из нескольких свойств CSS, которые определяют цвета элемента. Ниже приведены свойства CSS, которые поддерживает метод animate.

  • backgroundColor — Устанавливает цвет фона элемента.

  • borderTopColor — устанавливает цвет верхней стороны границы элемента.

  • borderBottomColor — Устанавливает цвет нижней части границы элемента.

  • borderLeftColor — устанавливает цвет для левой стороны границы элемента.

  • borderRightColor — устанавливает цвет для правой стороны границы элемента.

  • color — устанавливает цвет текста элемента.

  • outlineColor — Устанавливает цвет для контура; используется, чтобы подчеркнуть элемент.

backgroundColor — Устанавливает цвет фона элемента.

borderTopColor — устанавливает цвет верхней стороны границы элемента.

borderBottomColor — Устанавливает цвет нижней части границы элемента.

borderLeftColor — устанавливает цвет для левой стороны границы элемента.

borderRightColor — устанавливает цвет для правой стороны границы элемента.

color — устанавливает цвет текста элемента.

outlineColor — Устанавливает цвет для контура; используется, чтобы подчеркнуть элемент.

Синтаксис

Ниже приведен синтаксис анимированного метода jQueryUI: 

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

Вы можете установить любое количество свойств в этом методе через (запятую).

пример

В следующем примере демонстрируется использование методов addClass () . 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле animateexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Нажмите на кнопку и посмотрите, как меняется анимация окна.

46
Share: