Background animation problem with jQuery

Question

I am creating a page that uses AJAX to switch content, and each of the 5 pages have their own background colour.

Changing the page, makes the current background animate to the new one. I have 24bit PNGs with alpha transparency which overlay the background colours changing (it works alright).

There is however, one small problem. On occasion, in Firefox 3.5.1 at least, and Safari 3/4, the background will change, however my #main-container div will not. The container has background: transparent to be sure.

The problem is, this doesn't occur everytime, only sometimes. Could this just be a quirk of what I'm making the browser do?

I am using a jQuery plugin to animate the background colour.

I was wondering, does anyone know how I could force the #main-container to inherit it's parent container's (body) background?

I know I could ping it with a setInterval(), but that will be an ugly solution.

Any suggestions very appreciated.

The site is viewable @ http://www.acura.com.au/~kohana/

There is a menu to the right, and clicking those sections are where the problem is. You may have to navigate at least 8 times or so to see the quirk.

Any help is very much appreciated!

UPDATE

I'm going to attempt a setInterval() to check the colours... but not sure what exactly I'll do if I detect them being wrong.

Answer 1

To follow on from my above comment with respect to timing (sorry this isn't an actual answer, but there's not enough room in the comment field)... I think the problem is due to the timing of the following two events:

1. The dynamic (async) load of the new stylesheet
2. The updatePage function where you grab the background colour to fade to

The problem (if i'm reading your code right) is that you're grabbing the colour to fade to from a div which is styled by the style sheet that you're dynamically loading. If it hasn't finished loading (not just the downloading, but the application of styles to the DOM), then the background colour you grab will be the old one.

So steps to take from here... firstly try changing the timeout on your CSS loader to be really small & see if that makes the bug appear more often (or make it larger & see if it goes away). If this seems to match up, then a possible solution is to use a timeout in a loop that testing the background colour against the known old colour until you see it change & then carry on with your background animation, etc.

Hope that helps...

Answer 2

I have a question about the technical part of the site, As I see (am I mistaking?), you get the css via ajax, when a menu is clicked. Images also. I think here it would be a better idea if you get everything from the server when the page loads, then switch css classes on your tags. This would probably solve your random issue, too. Ex: for the background animation you only need to switch two classes, with animation.