jQuery動畫在FF中正常工作，但在所有其他瀏覽器中效果很差

Question

我已經在窗口加載時通過從屏幕左側到全屏幕寬度（通過通過setTimeout以2秒延遲觸發的功能）動畫的大型div div動畫。該div有一個按鈕，然後關閉/重新打開div。

這個左右div anim在Firefox中工作正常，但在任何其他瀏覽器中都無法正常工作。在其他瀏覽器中，div完全從l-r移動，但是沒有任何動畫（這包括：chrome，opera，safari，ie），而是。但是，關閉/重新開放的動畫在全部瀏覽器都沒問題，所以沒有問題。

所以，這只是窗口加載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; 
} 

Answer 1

而是在.nav-slider使用left:-100%在CSS中使用right:100%的。

參見：this fiddle