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％肯定，但我认为这可行。

使用toggleClass动画背景颜色变化？

1 个答案: