Фоновая проблема с анимацией в jQuery

Question

Я создаю страницу, которая использует AJAX для переключения контента, и каждая из 5 страниц имеет свой собственный цвет фона.

Изменение страницы, оживляет текущий фон на новый. У меня есть 24-битные PNG с альфа-прозрачностью, которые меняют цвета фона (все работает нормально).

Однако есть одна небольшая проблема. Иногда, по крайней мере, в Firefox 3.5.1 и Safari 3/4 фон будет меняться, однако мой #main-container div не будет. Контейнер имеет background: transparent, чтобы быть уверенным.

Проблема в том, что это происходит не каждый раз, а только иногда. Может ли это быть просто причудой того, что я заставляю браузер делать?

Я использую плагин jQuery для анимации цвета фона.

Мне было интересно, кто-нибудь знает, как я мог заставить #main-container наследовать фон его родительского контейнера (body)?

Я знаю, что могу проверить его с помощью setInterval(), но это будет ужасное решение.

Любые предложения очень ценятся.

Сайт доступен для просмотра @ http://www.acura.com.au/~kohana/

Справа находится меню, в котором щелкают те разделы, в которых проблема. Возможно, вам придется перемещаться как минимум 8 раз или около того, чтобы увидеть причуду.

Любая помощь очень ценится!

UPDATE

Я попытаюсь setInterval() проверить цвета ... но не уверен, что именно я сделаю, если обнаружу, что они неправильные.

Answer 1

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

1. Динамическая (асинхронная) загрузка новой таблицы стилей
2. Функция updatePage, при которой цвет фона уменьшается до

Проблема (если я правильно читаю ваш код) состоит в том, что вы выбираете цвет для перехода от div, который стилизован таблицей стилей, которую вы динамически загружаете. Если загрузка еще не завершена (не только загрузка, но и применение стилей к DOM), то фоновый цвет, который вы захватите, будет прежним.

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

Надеюсь, это поможет ...

Answer 2

У меня вопрос по технической части сайта, Как я вижу (я ошибаюсь?), Вы получаете css через ajax, когда нажимаете на меню. Изображения также. Я думаю, что здесь было бы лучше, если вы получаете все с сервера при загрузке страницы, а затем переключаете классы CSS на свои теги. Это, вероятно, решит и вашу случайную проблему. Пример: для фоновой анимации вам нужно переключить только два класса с анимацией.