Анимировать изменение цвета фона с помощью toggleClass?

Можно ли анимировать изменение цвета фона с помощью toggleClass?

Вот страница, работающая в настоящее время. — она была обновлена ​​с момента первого сообщения

Можно ли это анимировать? Я должен использовать toggleClass вместо расширенной анимации пользовательского интерфейса JQuery, потому что в исходном 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");
    }

Это выглядит, чтобы увидеть, красный ли фон. Если это так, он меняет цвет фона на исходное значение с фоновым изображением (и панель по-прежнему меняет цвет на более светлый при выборе, поэтому возвращаются все исходные функции), оно просто не анимируется обратно на синий. Единственное, что теперь делает переключатель, — это удаляет фоновое изображение, потому что его нельзя анимировать. На этой странице показаны текущие функции.


jquery jquery-ui jquery-ui-accordion
person user1004944    schedule 27.10.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать использовать задержку

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

Не уверен на 100%, но думаю, что это может сработать.

person oOo--STAR--oOo    schedule 27.10.2011
comment
Это на самом деле не собирается переключать его, не так ли? Это просто изменит его на красный, подождет, а затем вернет обратно. Мне нужно, чтобы он переключался. - person user1004944; 28.10.2011