jQuery Fading Opacity Problem

Question

For a client, I am attempting to get this site to work in IE and other web browsers (currently only works in Safari and Firefox for Mac): http://www.randomscripts.net/think_company_world/main.php I am using JQuery's fadeIn and fadeOut functions on the pictures to cycle them through in the background. For every other browser beside those listed above, it simply displays a black box over the content. I am thinking that it may have to do with the opacity: CSS property but am not quite sure.

If anyone could take a look, I would really appreciate it.

Answer 1

It seems to be working fine for me (Chrome, IE8 and Firefox 3. under Vista).

Are you sure the images are having time to load? Do you get the same problem if you resize the images to 100x100 and re-run the script?

Other thoughts

I'm getting an error on line 320 (sub options for nav 6) because you don't have any item on the page with an id of nav6_sub so that may be causing problems for you.

You're duplicating a lot of code on that page (are you copying and pasting or having it created inside a loop?), you should probably look at creating a jQuery plugin or something. I've always found this page to be useful (as well as the jQuery docs of course): http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Also, it's probably not related, but your HTML around the sub navigation could use some cleaning up. Instead of

<ul>
    <li><a href="#" id="nav5" onmouseover="dropDown('nav5_sub')"></a></li>
        <div class="sub" id="nav5_sub">
            <li>Private Client Log In</li>
            <li>Student Log In</li>
        </div>
    </li>
</ul>

You should have something like have:

<ul>
    <li>
        <a href="#" id="nav5" onmouseover="dropDown('nav5_sub')"></a>
        <ul class="sub" id="nav5_sub">
            <li>Private Client Log In</li>
            <li>Student Log In</li>
        </ul>
    </li>
</ul>