jQuery的.css效果不能與火狐工作

Question

我有一個水平滑動導航欄在我的網站，這是使用.css（{左：...}）函數動畫。

這裏的的jsfiddle： http://jsfiddle.net/rH9Nd/

下面是我使用的腳本：

$(document).ready(function() { 
$('.nav').mouseover(function() { 
    $('.nav').css({ left: '140px' }, 100); 
}); 
$('header').mouseout(function() { 
    $('.nav').css({ left: '0px' }, 100); 
}); 
}); 

它適用於Chrome罰款，但在Firefox只有資產淨值/頭格的一部分延伸，營造出奇怪的重疊效應。不知道如何解決。

此外，作爲一個側面問題 - 導航首次滑出，沒有動畫。打開一次後，它就會很好地滑動，而不是第一次。解決問題並不重要，但最好有解決方案。

感謝

Answer 1

這裏有一個CSS-唯一的解決辦法：

.nav { 
    position: fixed; 
    left: 0; 
    width: 180px; 
    margin-left: -180px; 
    height: 100%; 
    -webkit-transition: 0.3s all; 
    -moz-transition: 0.3s all; 
    transition: 0.3s all; 
} 
.nav:hover{ 
    margin-left: -40px; 
} 

我剛剛檢查它的工作在Safari，Chrome和Firefox。小提琴：http://jsfiddle.net/d9ujp/3/