Categories
JqueryUI教程

JqueryUI-颜色动画

JqueryUI-颜色动画


jQueryUI扩展了一些核心jQuery方法,以便您可以为元素设置不同的过渡动画。其中之一是动画方法。 jQueryUI扩展了jQuery animate方法,以添加对动画颜色的支持。您可以设置定义元素颜色的多个CSS属性之一的动画。以下是animate方法支持的CSS属性。

  • backgroundColor-设置元素的背景色。

  • borderTopColor-设置元素边框顶侧的颜色。

  • borderBottomColor-设置元素边框底侧的颜色。

  • borderLeftColor-设置元素边框左侧的颜色。

  • borderRightColor-设置元素边框右侧的颜色。

  • color-设置元素的文本颜色。

  • outlineColor-设置轮廓的颜色;用来强调元素。

句法

以下是jQueryUI animate方法的语法-

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

您可以在此方法中设置任意数量的属性,并以 (逗号)分隔。

下面的示例演示addClass()方法的用法。

<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>
   
   
   
      <div id="animTarget" class="elemClass">
         Hello!
      </div>
      <button id="button-1">Click Me</button>
   

让我们将上面的代码保存在HTML文件animateexample.htm中,并在支持javascript的标准浏览器中将其打开,您还必须看到以下输出。现在,您可以处理结果了-

单击按钮,然后查看动画框的变化。

error: 内容受到保护 !!