浏览器之间的 jQuery Animate 不一致答案

【问题标题】：jQuery Animate Inconsistencies between Browsers浏览器之间的 jQuery Animate 不一致
【发布时间】：2010-04-18 11:58:37
【问题描述】：

我试图弄清楚为什么这在 FireFox、Chrome 中有效，但在 IE 中无效，在 Safari 和 Opera 中无效（您可以在 http://41six.com/about/ 上查看它的效果）

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>

CSS：

#menu .home {
    display:block;
    height:24px;
    width:24px;
    background-image: url('../images/Home.png');
}

#home-hover {
    position:fixed;
    padding: 3px 0 3px 10px;
    left:40px;
    top:125px;
    width: 100px;
    height: 20px;
    background-color:#000;
    color: #fff;
    z-index:9999;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-bottom-radius: 5px;
    display:none;
}

JQuery:

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

它绝对不漂亮，但我不确定为什么它不适用于 Safari、Opera 和 IE

【问题讨论】：

我注意到您使用的是 jQuery 1.3.2。你可以试试 jQuery 1.4.2。

标签： jquery cross-browser jquery-animate

【解决方案1】：

首先，一个建议：将“溢出”设置为“隐藏”——它会去掉一个小的动画神器。

有趣的是，悬停效果发生在 ie6.... =)

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

#menu {
   width:400px;
}

是的，它不漂亮，但它会告诉你一些东西；将鼠标悬停在“主页”上，您会看到“主页”的动画效果非常好……在菜单的最底部。看起来你有两个问题：溢出和定位。

为了突出溢出问题，设置

#menu {
    width:60px;
}

和

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

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

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

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

所以这对你来说是一个公平的开始。

不过，坦率地说，重新开始可能是值得的 - 看起来这些 css 中的某些内容可以从一些认真的重构中受益。

一切顺利，

贾里德

【讨论】：

【解决方案2】：

当您将鼠标悬停在左侧菜单上时，您将显示一个覆盖链接的 DIV，因此您不再位于链接上方，而是位于其顶部的 DIV 上方，因此动画将转到- 立即悬停状态。

【讨论】：

DIV 显示在链接的右侧。在 IE 中，动画根本不显示（如果是上述情况，它至少会开始显示）。在 Safari 中，它显示第一次，然后只显示一半。在 Opera 中它会显示，然后只会部分消失，直到您将鼠标悬停在另一部分上。