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

回答

相关问题