jquery .css效果不适用于firefox

Question

我的网站上有一个水平滑动导航栏，使用.css（{left：...}）函数进行动画处理。

这里是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上只有部分导航/标题div扩展，从而产生奇怪的重叠效果。不知道如何解决。

另外，作为一个侧面问题 - 导航器第一次滑出，没有动画。在它打开一次之后它会很好地滑动，这不是第一次。解决问题并不重要，但要找到解决方案会很好。

由于

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/