使用 jQuery 快速更改 div 的背景

Question

我正在尝试在 div 上使用 jQuery 为背景更改设置动画。

这是我实际拥有的，但它不起作用。

你知道为什么吗？

谢谢。

$("#banner-message").click(function(){
    for (var i = 0; i < 30; i++ ) {
        $(this)
        .animate({ backgroundColor: "#343a40", color: "#ffffff"}, 20)
        .animate({ backgroundColor: "transparent", color: "#343a40"}, 20);
    }
});

#banner-message {
  background: red;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message"></div>

Answer 1

您需要包含jQuery Color 插件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<div id="banner-message"></div>