jQuery的動畫不一致瀏覽器

之間，我試圖找出爲什麼這個工作在Firefox，Chrome，但不是在IE瀏覽器，而不是正常的Safari和Opera（你可以查看它在http://41six.com/about/工作）jQuery的動畫不一致瀏覽器

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

來源

2010-04-13 silent1mezzo

我注意到您使用jQuery 1.3.2。你可以試試jQuery 1.4.2。 – Samuel 2010-04-16 14:09:51

首先，一個建議：將「溢出」設置爲「隱藏」 - 它將擺脫一個小的動畫神器。

有趣的是，懸停效果發生在IE6 .... =）

好了，所以我找到的東西，這將有助於：嘗試設置

#menu { 
    width:400px; 
}

是的，它不漂亮，但它會告訴你一些事情;將鼠標懸停在「主頁」上，然後您會看到「主頁」的所有內容都出現在菜單的最底部。看起來你有兩個問題：溢出和定位。

爲了突出溢出問題，設置

#menu { 
    width:60px; 
}

和

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

（同樣，這些值都只是用於調試目的）。

將鼠標懸停在「家」圖標上，就會看到問題。

您可以通過從#menu中刪除「position：fixed」並將所有＃home-hover等中的「z-index」更改爲1000來解決此問題（通過試驗和錯誤發現）。

所以這對你來說是一個公平的開始。不過，坦率地說，重新開始可能是值得的 - 看起來這個css可能會從一些嚴重的重構中受益。

一切順利，

賈裏德

來源

2010-04-18 03:58:37

當您將鼠標懸停在左側的菜單中，您都出現了覆蓋鏈接DIV，所以你沒有通過鏈接的時間越長，您就越過位於其上方的DIV，因此動畫立即進入非懸停狀態。

來源

2010-04-13 18:34:29

DIV顯示在鏈接的右側。在IE中，動畫完全不顯示（如果以上情況是這樣，它至少會開始顯示）。在Safari中它顯示第一次，然後只有一半顯示其餘。在Opera中顯示，然後只能部分離開，直到您將鼠標懸停在另一部分上。 – silent1mezzo 2010-04-13 19:16:14

jQuery的動畫不一致瀏覽器

回答

相關問題