使用toggleClass动画背景颜色变化？-Java 学习之路

是否可以使用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;}

不会延伸到标签 . 未选中时，它会将手风琴 Headers 更改为白色，但选择后，它会将背景保留为红色，但会将颜色更改为原始的蓝色 . 我可以通过添加这个类来覆盖它并让它一直保持白色：

.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.

1 回答

你可以尝试使用延迟

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

不是100％肯定，但我认为这可行 .

回复于 2024-04-28T06:07:28+08:00

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

1 回答

相关问题