I have a div with an id of ‘cover’ in which is a nested div with an id of ‘stars1’. The ‘cover’ div has a black background and an animation of fading. The ‘stars1’ div has an animation of moving stars. Both animations work on their own but the stars1 animation doesn’t work until the cover div animation is finished. I was thinking this was a z-index problem as the cover div has a z-index of 180. Can anyone advise if there is any obvious problem which might be causing the stars animation not to work.
The obvious problem is your code is telling the stars animation to not start until the cover animation is complete. So all you need to do is tell your stars animation in your code to start at some point before the cover animation finishes. At what point the stars animation starts is up to you to choose.
Thanks for your reply. I need the stars animation to start immediately and the fading out animation to start a few seconds later. However the stars animation doesn’t work until the opacity of the div doing the fading animation has reduced. That was why I thought it might be a z-index problem.
This sounds more like a script problem than a css problem. It won’t have anything to do with z-index because a parent’s background can’t sit on top of its childrens background. If you are fading the parent in and out then the nested children will automatically be faded in and out also.
You could possibly move the nested stars div out of that parent and then absolutely place it back into position and the fading div will not affect the absolutely placed element.
However as MaxHeight said above this sounds more like a script timing problem. Are you using jquery for this? Do you have a link to the page.
If you can provide more information I will move the thread to the appropriate place.
Thanks for your replies.
I have tried taking the nested div out but with no luck. So now I have added the starry effect to the fading div itself and I still get the same result - the starry effect only appears once the div has started fading a bit.
I have the page uploaded here
Apologies for the messy code - you can tell I have been working on this for a while 
And yes, I know I have far too many JQuery scripts going on here - never again.
Ok,
I think this will get the stars working for you:
.jstar_span{z-index:9999}
Those scripts are causing some errors in the Firefox error console so you do need to sort them out a bit.
Wow! Thanks so much - it works! And yes, I need to start looking at the scripts, they are a bit of a mess.
What you’ve done here is basically create a scripted ‘splash page’ – an annoying feature more prone to driving vistiors away from the site than draw them in. It’s a goofy silly little animooted bit of nonsense, so I’d just axe the entire concept as a waste of bandwidth, time and effort. Same goes for that annoying CPU chewing memory hogging disaster of mouse-trails nonsense.
The two combined bring me back to the old question “What is this, 1997?” – I mean, what’s next? Auto-playing music?
Though to be fair, I say that about any page filled with jquery bloat and other “gee ain’t it neat” nonsense that just gets in the way of the page actually being something I’d want to visit.
Not necessarily
You would have to do some sort of analytics to see if you actually are losing visitors or not. In some cases you might actually be gaining visitors.
In any case, if that is what a client asks for I would explain the potential pros and cons and if the client still insists and is a client I want to hang on to, then I would do it because if I don’t then the client would most probably go to some else who will.