Question

我使用jQuery动画为旋转木马构建了一个简单的动画。我总有5个容器，其中3个可见。添加动画新动画并删除最后一个动画时。 Firefox和Chrome完全符合我的预期。在Internet Explorer中，当容器位置被“scrollLeft”刷新时，内容会“闪烁”，我不知道是什么原因造成的。

这是标记：

<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中使用流畅的动画吗？

Answer 1

每当我制作一个滑块时，我总是通过动画显示IE中的margin-left，留在其他浏览器中，以及在新浏览器中进行CSS转换来完成它。

这似乎工作正常。

jQuery动画性能IE

1 个答案: