jquery fadeIn/Out IE problem - frustrating

问题:

please please help me someone, i am losing my mind.

i have absolute/relative (tried both) positioned divs all with class of box. on click i want the divs to fade out then the correct one fade in. works fine in all browsers apart from IE 6 and 7 (sometimes 8). they fade out but nothing fades back in. looked all over the net for this type of problem but none help. Please please help.

this is the code

$("li#about").click(function(){
   $box.fadeOut(200);
   $("div#about").delay(800).fadeIn(800);
});

$("li#portfolio").click(function(){
    $box.fadeOut(200);
    $("div#portfolio").delay(800).fadeIn(800);
});

etc......

what am i missing? demo here - dead link!

回答1:

If I'm reading this correctly, do you have multiple HTML tags with the same ID, even though they're different types of tags? For example, li#about and div#about. Maybe Internet Explorer would prefer if they had unique IDs?

回答2:

I would def be adding achors to your main navigation so that they accessible via keyboard and when JavaScript is turned off. You can then make your script smaller too by doing the following :

<div id="nav">
<ul>
    <li><a href="#about">about</a></li>
    <li><a href="#portfolio">portfolio</a></li>
    <li><a href="#social">social</a></li>
    <li><a href="#contact">contact</a></li>
</ul>

$("#nav li a").click(function(){
    $box.fadeOut(200);
    $($(this).attr('href')).delay(800).fadeIn(800);
});

回答3:

you dont define $box. in IE you need to define it so :

var $box = .........

you need to do this also with $nav

EDIT The elements in your script that arent working are the once you did not define