如何用jQuery改变任何有动画的div的颜色

在这篇文章中，我们将学习如何使用jQuery来改变任何HTML div的动画颜色。

我们将使用jQuery .animate()方法来改变任何元素的背景颜色。使用这个方法的语法如下。

语法:

(selector).animate({css styles},speed,easing,callback)

CSS样式定义了CSS属性，如背景色、填充、边距等。速度指定动画的速度，默认为400毫秒。选项easing指定了动画中不同点的元素的速度，例如，swing或linear。回调是一个函数，在动画完成后执行。

例子：下面的例子有助于改变任何有动画的div的颜色。

<!DOCTYPE html>
<html>
  <head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
    </script>
    <style>
      div {
        width: 300px;
        border: solid 1px black;
        border-radius: 5px;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <h2 style="color: green">GeeksforGeeks</h2>
  
    <p>
      <input type="button" id="btn1" value="Animate" />
    </p>
  
    <div id="div">Animate Colors</div>
    <script>
      var animate = true;
      ("#btn1").click(function () {
  
        // Changing the background color alongwith
        // changing width of the div tag
        if (animate)
          ("#div").animate({ "background-color": "red", 
                               width: "200px" }, 800);
        else
          $("#div").animate(
            { "background-color": "green", 
               width: "300px" },
            800
          );
  
        animate = !animate;
      });
    </script>
  </body>
</html>