Question

IE9中的.animate（）函数有一个奇怪但很简单的问题。我说奇怪，因为即使在IE6中它也能正常工作。

我有两个无序列表。当某人在第一个列表中悬停在li上时，相应的li动画在第二个列表中。这适用于所有优秀的浏览器和IE6。但是在IE9中只有第一个动画，另外两个不是动画。

这是标记：

    <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>

这是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%;
}

IE的条件CSS：

#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;
}

最后是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); }
);

请请帮助!!我正试图解决这个问题。但是，嘿，我只是一个jQuery的菜鸟，所以即使我现在正在盯着这个问题，我也不会意识到这一点。我知道我想要实现的目标可以通过插件完成。但如果我可以使用它，我很久以前就会这样做。任何帮助将不胜感激。提前谢谢。

Answer 1

修复结束</h1>代码。你将它们作为<h1>。结束标记应为</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>

此外，您可以用以下代码替换所有三个几乎相同的代码块：

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); }
);

非常希望尽可能避免重复代码。你可以在这里看到它：http://jsfiddle.net/jfriend00/v5dmn/。

多个.animate（）函数在IE9中不起作用（在ie6中工作;）

1 个答案: