如何更改使用 jQuery 动画的任何 div 的颜色？

在本文中，我们将学习更改任何 HTML 的颜色 使用 jQuery 制作动画的div 。

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

句法：

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

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

示例：以下示例有助于更改任何动画div的颜色。

HTML

  
    
    
    
    
    
      div {
        width: 300px;
        border: solid 1px black;
        border-radius: 5px;
        margin-left: 20px;
      }
    
  
  
    GeeksforGeeks
  
    
      
    
  
    Animate Colors
    
      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;
      });
    
  

输出：