I am using the simple lightbox code from the jQuery: Novice to Ninja book to create a dark backdrop on a timeline project where I have some off-screen divs sliding up. The underlay works fine everywhere on my target browsers except for Explorer 8. In this case, the underlay is added dynamically, but it is visible in its initial 100% black form for a millisecond, prior to the .css(‘opacity’, ‘0’) call taking effect. Any way around this brief appearance?
The relevant jQuery call is:
$('')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.animate({'opacity': '0.6'}, 'slow')
.appendTo('body');
The project is not finished and has other Explorer 8 issues, but you can see the problem (with IE8) at this address: http://www.communicationdesign.com/jw/timeline.html. Click on the arrow near W.J.J. Smith at the bottom to bring his story into view. Other examples exist on other panels…
If you look with Explorer 9 or Firefox on Windows or any current browser in OSX you’ll see what it should be doing.
Thanks.
