Jquery通过平滑过渡更改背景颜色

要通过jQuery实现背景颜色的平滑过渡，可以使用animate()方法，该方法允许我们执行自定义动画

<!DOCTYPE html>
<html>
<head>
    <style>
        #mydiv {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="mydiv"></div>

<button id="bgColorButton">更改背景颜色</button>

<script>
$(document).ready(function(){
    $("#bgColorButton").click(function(){
        $("#mydiv").animate({
            backgroundColor: "blue"
        }, 1000);
    });
});
</script>

</body>
</html>

在此示例中，当点击"更改背景颜色"按钮时，#mydiv的背景颜色将在1秒（1000毫秒）内从红色渐变为蓝色。

要在原有的颜色之间平滑过渡，只需在animate()方法中设置backgroundColor为所需的颜色，然后根据需要调整动画持续时间（以毫秒为单位）。

要在渐变过程中添加更多颜色，可以使用jQuery UI库，它扩展了animate()方法以支持颜色动画。