jQuery動畫性能IE

我使用jQuery animate爲旋轉木馬構建了一個簡單的動畫。我總是有5個容器，其中3個是可見的。當添加動畫新的動畫時，最後一個被刪除。 Firefox和Chrome完全符合我的預期。在Internet Explorer中，當容器位置通過「scrollLeft」刷新時，內容會「閃爍」，我不知道該效果的原因是什麼。jQuery動畫性能IE

這是標記：

<div id="wrapper"> 
    <div id="conti"> 
     <div id="_ID"> 
      <div class="section">0</div> 
      <div class="section">1</div> 
      <div class="section active">2</div> 
      <div class="section">3</div> 
      <div class="section">4</div> 
     </div> 
    </div> 
<button id="prev">prev</button> 
<button id="next">next</button>

這個腳本（點擊的情況下，下一個）

var conti = $('#conti'); 
//set startposition of scrollbar (center) --> width of section 
var teaserwidth = 60; 
conti.scrollLeft(teaserwidth); 
var animating = false; 
$('#next').click(function() { 
    if(animating) return; 
    animating = true; 
    conti.animate({ 
     scrollLeft: 2*teaserwidth 
    },  { 
      complete: function() { 
       conti.find('.section:last').after('<div style="background:red;" class="section">NF</div>'); 
       conti.scrollLeft(teaserwidth); 
       conti.find('.section:first').remove(); 
       animating = false; 
      } 
     } 
    ); 
});

我有色新添加的內容紅色更清楚地看到閃爍效果在IE中。你也可以測試JSFIDDLE

你會改變/建議在IE中有流體動畫？

來源

2012-06-04 ho.s

每當我製作一個滑塊時，我總是通過動畫在IE中保留邊緣，在其他瀏覽器中保留，在新的瀏覽器中轉換CSS來完成。

這似乎工作正常。

來源

2012-06-04 08:31:15

嘿Rich，感謝您的建議！我使用marginLeft動畫重建了腳本：[JSFIDDLE]（http://jsfiddle.net/kwdPK/131/）現在對於IE來說這似乎很流暢，這非常棒。但它在Firefox中「倒閉」（whoohoo）。你認爲有沒有一種方法來優化兩個瀏覽器而不加載不同的腳本？ –

我也在普通瀏覽器中使用CSS3轉換，並且只使用IE9及以下版本的傳統JavaScript動畫技術。 http://css3.bradshawenterprises.com/slide2/向您展示如何在新瀏覽器中滑動。爲了使它易於使用，請嘗試我的垃圾，但簡單的代碼在這裏：http://css3.bradshawenterprises.com/legacy/，或者只是放在http://playground.benbarnett.net/jquery-animate-enhanced/如果你已經在使用jQuery。 –

jQuery動畫性能IE

回答

相關問題