jQuery为浏览器之间的不一致设置动画

我正试图弄明白为什么这在FireFox、Chrome中有效，但在IE中无效，在Safari和Opera中无效（你可以在

HTML:

<div id="menu"> 
    <ul> 
        <li> 
            <a href="/" class="home" title="Home" alt="fortyonesix">&nbsp;</a>   
            <div id='home-hover'>Home Page</div> 
        </li>
    </ul>
</div>

JQuery：

$('.home').hover(function() {
    $('#home-hover').animate({width:'toggle'},200);
},
function() {
    $('#home-hover').animate({width:'toggle'},200);
});

---

它绝对不漂亮，但我不确定为什么它不适用于Safari、Opera和IE。当你将鼠标移到左侧菜单上时，你会显示一个覆盖链接的DIV，因此你不再在链接上方，而是在链接上方的DIV上，因此动画会立即进入取消悬停状态。

首先，建议：设置“溢出”到“隐藏”——它将消除一个小的动画伪影

有趣的是，悬停效应发生在ie6中……）

好的，我发现了一些有用的东西：尝试设置

#menu {
   width:400px;
}

是的，它并不漂亮，但它会向你展示一些东西；鼠标移到“主页”上，你会看到“主页”的东西在你菜单的最底部显示得很好。看起来你有两个问题：溢出和定位

要突出显示溢出问题，请设置

#menu {
    width:60px;
}

及

（同样，这些值仅用于调试目的）

将鼠标移到“主页”图标上，您将看到问题所在

您可以通过从#菜单中删除“position:fixed”并将所有#home hover等上的“z-index”更改为1000来修复此问题（我通过反复试验发现）

这对你来说是个公平的开始

不过，坦白地说，重新开始可能是值得的——看起来这种css中的一些可能会从一些严重的重构中受益

祝你一切顺利

---

Jared

DIV显示在链接的右侧。在IE中，动画根本不显示（如果出现上述情况，至少会开始显示）。在Safari中，它显示第一次，然后只有一半显示其余部分。在Opera中，它只显示部分内容，直到您将鼠标悬停在另一部分上。我注意到您正在使用jQuery 1.3.2。您可以尝试使用jQuery 1.4.2。

#menu {
    width:60px;
}

#home-hover {
    background-color:red;
}