javascript - jQuery アニメーションは FF では問題なく動作しますが、他のすべてのブラウザではうまく動作しません

Question

ウィンドウの読み込み時に左画面から全画面幅までアニメーション化する大きな div があります (setTimeout を介して 2 秒の遅延後にトリガーされる関数を介して)。divには、そのdivを閉じる/再度開くためのボタンがあります。

この左右の div アニメーションは、Firefox では正常に動作しますが、他のブラウザーでは正しく動作しません。他のブラウザーでは、div は lr から完全に移動しますが、アニメーションはありません(これには、chrome、opera、safari などが含まれます)。ただし、閉じる/再度開くアニメーションはすべてのブラウザーで問題ないため、問題はありません。

それで、私が助けを求めているのはウィンドウロードdivアニメーションだけです.FFでは問題ないが、他のすべてのブラウザではそうではない理由についてアドバイスできますか? これは html/js/css のフィドルの例です (この順序で):

http://jsfiddle.net/2nvhP/3/

<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;
}