Question

I have a strange but simple problem with the .animate() function in IE9. I say strange because it works as expected even in IE6.

I have two unordered lists. When someone hovers over an li in the first list the corresponding li animates in the second list. This works properly with all the good browsers and also IE6. But in IE9 only the first li animates, the other two are not animating.

Here is the mark up:

    <ul id="nav">
        <li id="nav_one"><h1>NAV ONE<h1><p>This animates in IE9</p></li>
        <li id="nav_two"><h1>NAV TWO<h1><p>This does not animate in IE9</p></li>
        <li id="nav_three"><h1>NAV THREE<h1><p>This does not animate in IE9</p></li>
    </ul>
    <ul id="nav_wrapper">
        <li id="nav_wrapper_one"><h1>&nbsp;<h1><p>&nbsp;</p></li>
        <li id="nav_wrapper_two"><h1>&nbsp;<h1><p>&nbsp;</p></li>
        <li id="nav_wrapper_three"><h1>&nbsp;<h1><p>&nbsp;</p></li>
    </ul>

Here is the CSS:

#nav{
    color: #fff;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    margin: 2% 2%;
    position:absolute;
    top:0px;
    z-index: 3;
}
#nav h1{
    font-size:42px;
}
#nav p{
    font-size:16px;
}
#nav_wrapper{
    color: #fff;
    font-family: 'Open Sans Condensed', Arial, sans-serif;
    margin: 2% 2%;
    position:absolute;
    top:0px;
    width:100%;
    z-index: 2;
}
#nav_wrapper h1{
    font-size:42px;
}
#nav_wrapper p{
    font-size:16px;
}
#nav_wrapper li{
    background: rgb(200, 200, 200);
    background: rgba(200, 200, 200, 0.6);
    overflow:hidden;
    width:0%;
}

Conditional CSS for IE:

#nav_wrapper li{
    background:none;
    /* For IE 5.5 - 9*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60c8c8c8, endColorstr=#60c8c8c8);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#60c8c8c8, endColorstr=#60c8c8c8)";
    zoom: 1;
}

And finally the jQuery:

$("#nav_one").hover(
function(){ $("#nav_wrapper_one").stop().animate({width: '96%'}, 300); },
function(){ $("#nav_wrapper_one").stop().animate({width: '0%'}, 300); }
);
$("#nav_two").hover(
function(){ $("#nav_wrapper_two").stop().animate({width: '96%'}, 300); },
function(){ $("#nav_wrapper_two").stop().animate({width: '0%'}, 300); }
);
$("#nav_three").hover(
function(){ $("#nav_wrapper_three").stop().animate({width: '96%'}, 300); },
function(){ $("#nav_wrapper_three").stop().animate({width: '0%'}, 300); }
);

PLEASE PLEASE PLEASE HELP !! I’m at the end of my tether trying to fix this. But hey i’m just a noob with jQuery so I won’t realize it even if i’m staring at the problem right now. I know what i’m trying to achieve can be done through plugins. But if I could use it, I would have done so a long time ago. Any help will be appreciated. Thanks in advance.

Answer 1

Fix your closing </h1> tags. You have them as <h1>. The closing tags should be </h1>.

<ul id="nav">
    <li id="nav_one"><h1>NAV ONE</h1><p>This animates in IE9</p></li>
    <li id="nav_two"><h1>NAV TWO</h1><p>This does not animate in IE9</p></li>
    <li id="nav_three"><h1>NAV THREE</h1><p>This does not animate in IE9</p></li>
</ul>
<ul id="nav_wrapper">
    <li id="nav_wrapper_one"><h1>&nbsp;</h1><p>&nbsp;</p></li>
    <li id="nav_wrapper_two"><h1>&nbsp;</h1><p>&nbsp;</p></li>
    <li id="nav_wrapper_three"><h1>&nbsp;</h1><p>&nbsp;</p></li>
</ul>

Also, you can replace all three blocks of near identical code with this:

function makeWrapper(el) {
    return $("#" + el.id.replace(/_/, "_wrapper_"));
}

$("#nav li").hover(
    function(){makeWrapper(this).stop().animate({width: '96%'}, 300); },
    function(){makeWrapper(this).stop().animate({width: '0%'}, 300); }
);

It’s highly desirable to avoid repeated code whenever possible. You can see it work here: http://jsfiddle.net/jfriend00/v5dmn/.