0

我用 jQuery animate 为轮播制作了一个简单的动画。我总是有 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 中也有流畅的动画吗？

4

1 回答 1

0

每当我制作一个滑块时，我总是通过在 IE 中为左边距设置动画，在其他浏览器中为左边距设置动画，在较新的浏览器中使用 CSS 转换。

这似乎工作正常。

于 2012-06-04T08:31:15.343 回答