Javascript jQuery动画在FF中运行良好，但在所有其他浏览器中运行不佳

我有一个大的ish div，在窗口加载时从屏幕左侧到全屏宽度进行动画制作（通过setTimeout在2秒延迟后触发的函数）。div有一个按钮，用于关闭/重新打开所述div

这个左-右div动画在Firefox中运行良好，但在任何其他浏览器中都无法正常工作。在其他浏览器中，div完全从l-r移动，但没有任何动画（包括：chrome、opera、safari、ie）。但是，关闭/重新打开动画在所有浏览器中都很好，所以这没有问题

所以，我正在寻找帮助的只是windowloaddivanim，它可以告诉我为什么在FF中它是好的，但在其他浏览器中却不好？下面是一个fiddle示例html/js/css（按顺序排列）：

烙印
$（窗口）。加载（函数（）{
var-navSliderFlag=0；
var navSlider=$（'div.nav-slider'）；
var navButton=$（'a.nav-slider-button'）；
var navButtonStatic=$（'a.nav-slider-button-static'）；
console.log（'navSliderFlag='+navSliderFlag）；
html（'OPEN'）；
html（'CLOSE'）；
//函数用于在窗口加载时设置主导航的动画
函数navSlideAnim（）{
导航滑块。动画({
左：0
}，1000，“摆动”）；
//}，750，“easeOutQuad”）；
css（“左”、“-80px”）；
navButton.removeClass（“导航打开”）；
navSliderFlag=1；
console.log（'navSliderFlag='+navSliderFlag）；
}
//暂停动画2秒钟
设置超时（navSlideAnim，2000）；
//打开导航栏-我以后可能会完全删除它
navButtonStatic.on（'click'，function（））{
navSlideAnim（）；
});
//打开导航栏和动画
导航按钮。在（'单击'，函数（）上）{
$（this.html（'CLOSE'）；
$（此）.parents（'.nav slider'）.animate({
“左”：“-=99.99%
}，1000，“swing”，函数（）{
$（this.removeClass（'nav-open'）；
navButtonStatic.animate({
左：0
}，500，“摇摆”）；
navSliderFlag=0；
console.log（'navSliderFlag='+navSliderFlag）；
});
});
});
html，
身体{
保证金：0；
身高：100%；
背景：#ccc；
颜色：#232323；
字体系列：Helvetica、Arial、无衬线字体；
}
a{
颜色：#fff；
}
#桅顶{
填充：80px0；
}
/*动画导航*/
.导航滑块{
背景：#fff；
边际：0.80px 0.0；
位置：相对位置；
右：100%；
}
.导航滑块内容{
宽度：940px；
保证金：0自动；
填充：40px 0 30px 75px；
}
.导航滑块按钮，
.nav-滑块-按钮.nav-打开，
.nav-滑块-按钮-静态.nav-打开，
.向上滚动{
位置：绝对位置；
排名：0；
右：-80px；
宽度：80px；
高度：80px；
背景：#3F3E3E；
}
.nav-滑块-按钮-静态.nav-打开{
左：0；
顶部：80px；
}

而不是在

上的css中使用
右：100%
。导航滑块

使用

左：-100%

见：

<header id="masthead" class="masthead-anim">
    <div class="nav-slider">
        <div class="nav-slider-content clearfix">
            <h1 class="hide-text brand-logo">Brand</h1>
        </div> <!--/.nav-slider-content-->
        <a href="#" class="nav-slider-button nav-open"></a>
    </div> <!--/.nav-slider-->
    <a href="#" class="nav-slider-button-static nav-open"></a>
</header>

$(window).load(function(){

    var navSliderFlag = 0;
    var navSlider = $('div.nav-slider');
    var navButton = $('a.nav-slider-button');   
    var navButtonStatic = $('a.nav-slider-button-static');

    console.log ('navSliderFlag = ' + navSliderFlag);
    navButtonStatic.html('<span class="hide">OPEN</span>');
    navButton.html('<span class="hide">CLOSE</span>');

    // Function to animate the primary nav on window load
    function navSlideAnim() {
        navSlider.animate({
            left: 0
        }, 1000, "swing");
        //}, 750, "easeOutQuad");
        navButtonStatic.css("left", "-80px");
        navButton.removeClass('nav-open');
        navSliderFlag = 1;
        console.log ('navSliderFlag = ' + navSliderFlag);
    }

    // Pause the anim for 2 seconds
    setTimeout(navSlideAnim, 2000);

    // Open the navbar - i may be removing this completely later
    navButtonStatic.on('click', function(){
        navSlideAnim();
    });

    // Open the navbar and anim
    navButton.on('click', function(){
        $(this).html('<span class="hide">CLOSE</span>');
        $(this).parents('.nav-slider').animate({
            "left": "-=99.99%"
        }, 1000, "swing", function(){
            $(this).removeClass('nav-open');
            navButtonStatic.animate({
                left: 0
            }, 500, "swing");
            navSliderFlag = 0;
            console.log ('navSliderFlag = ' + navSliderFlag);
        });
    });
});

html,
body {
    margin: 0;
    height: 100%;
    background: #ccc;
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
}
a {
    color: #fff;
}
#masthead {
    padding: 80px 0 0;
}

/* Anim nav */
.nav-slider {
    background: #fff;
    margin: 0 80px 0 0;
    position: relative;
    right: 100%;
}
.nav-slider-content {
    width: 940px;
    margin: 0 auto;
    padding: 40px 0 30px 75px;
}
.nav-slider-button,
.nav-slider-button.nav-open,
.nav-slider-button-static.nav-open,
.scrollup {
    position: absolute;
    top: 0;
    right: -80px;
    width: 80px;
    height: 80px;
    background: #3F3E3E;
}
.nav-slider-button-static.nav-open {
    left: 0;
    top: 80px;
}