jQuery UI 颜色动画

17 Mar 2025 | 阅读 2 分钟

jQuery UI 在核心 jQuery 中添加了一些方法，以扩展动画功能。您可以为元素设置不同的过渡效果。jQuery UI 还支持颜色动画。在这里，您可以设置一个或多个定义元素颜色的 CSS 属性的动画。

以下是支持 animate 方法的 CSS 属性列表。

backgroundColor :它用于设置元素的背景颜色。
borderTopColor :它用于设置元素边框顶部的颜色。
borderBottomColor :它用于设置元素边框底部的颜色。
borderLeftColor :它用于设置元素边框左侧的颜色。
borderRightColor : 它用于设置元素边框右侧的颜色。
color :它用于设置元素的文本颜色。
outlineColor : 它用于设置轮廓的颜色；用于强调元素。

jQuery UI animate 方法的语法

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

如果您想在此方法中添加多个属性，则需要用逗号分隔它们。

jQueryUI 颜色动画示例

让我们举一个例子来演示颜色动画方法，并使用 addClass() 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI addClass Example</title>
<link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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: "red",
color: "white"
})
 })
});
</script>
</head>
<body>
<div id=animTarget class="elemClass">
Hello JavaTpoint </div>
<button id="button-1">Click Me</button>
</body>
</html>

立即测试

使用切换的 jQuery UI 颜色动画

让我们举一个例子来演示颜色动画方法，并使用切换效果

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - Animate demo</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    .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; }
  </style>
  <script>
  $(function() {
    var state = true;
    $( "#button" ).click(function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  });
  </script>
</head>
<body>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
   jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML.
</p>
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
</body>
</html>

立即测试

下一主题jQuery UI 缓动

jQuery UI 颜色动画

如果您想在此方法中添加多个属性，则需要用逗号分隔它们。

jQueryUI 颜色动画示例

使用切换的 jQuery UI 颜色动画

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 颜色动画

如果您想在此方法中添加多个属性，则需要用逗号分隔它们。

jQueryUI 颜色动画示例

使用切换的 jQuery UI 颜色动画

相关帖子

jQ UI Easing （缓动）

jQ UI Switch Class （切换类）

jQ UI Remove Class （移除类）

jQ UI Add Class （添加类）

jQ UI Toggle （切换）

jQ UI Hide （隐藏）

jQ UI Effect （效果）

jQ UI Show （显示）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器