用toggleClass动画背景颜色变化？

Question

是否可以使用 toggleClass 为背景颜色更改设置动画？

Here is the page working currently. - 自第一次发布以来已更新

可以制作动画吗？我必须使用 toggleClass 而不是 JQuery UI 扩展动画，因为原始 CSS 中有背景图像，并且动画会更改背景颜色，但不会删除背景图像。另外，我想切换它，而不是永久更改背景颜色。

这是当前的javascript：

function ToggleClass() {
            $("#Section2").toggleClass("errorpanel");
            $("#Secion2HeaderText").toggleClass("errortext");
        }

其次，如您所见，我必须更改 CSS 文件两次。我不明白为什么这个类为

.errorpanel{ color: #ffffff !important; background: red !important;}

不向下延伸到标签。当未选中时，它会将手风琴标头更改为白色，但选择它时，它将背景设置为红色，但将颜色更改为原始蓝色阴影。我可以通过添加这个类来覆盖它并让它一直保持白色：

.errortext{color: #ffffff !important;}

无论如何，我想为它们制作前后的动画。

编辑：

我在想这样的事情：

function ToggleClass() {
        var color = $("#Section2").css("background-color");
        if (color == 'rgb(255, 0, 0)') {
            $("#Section2").animate({ backgroundColor: "#507CD1" }, 2500);
            $("#Section2").toggleClass("testerrorpanel");
        }
        else {
            $("#Section2").toggleClass("testerrorpanel");
            $("#Section2").animate({ backgroundColor: "red" }, 2500);
        }

        $("#Secion2HeaderText").toggleClass("errortext");
    }

看看背景是否是红色的。如果是，它将背景颜色更改回原始值，背景图像（并且面板在选择时仍会更改为较浅的颜色，因此返回所有原始功能），它只是不会动画回蓝色。切换现在唯一要做的就是删除背景图像，因为它不能被动画化。 This page shows the current functionality.

Answer 1

您可以尝试使用延迟

$("#Section2").animate({ backgroundColor: "red" }, 2500).delay(800).animate({ backgroundColor: "#507CD1" }, 2500);

不是 100% 确定，但我认为这可能有效。