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

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

0 голосов
/ 27 октября 2011

Можно ли анимировать изменение цвета фона с помощью 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");
    }

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

1 Ответ

0 голосов
/ 27 октября 2011

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

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

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

...