0

I built a simple animation for a carousel with jQuery animate. I always have 5 containers, 3 of them visible. When animating a new one is added and the last is removed. Firefox and Chrome do exactly what I expect. In Internet Explorer, the moment the containers position is refreshed by "scrollLeft", the content is "blinking" and I do not know what's the reason for that effect.

This is the markup:

<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>

This the script (for case of clicking next)

    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;
            }
        }
    );
});

I colored the new added content red to better see the blinking effect in IE. You can also test on JSFIDDLE

What would you change/suggest to have a fluid animation in IE too?

4

1 に答える 1

0

スライダーを作成するときはいつでも、IE では margin-left をアニメーション化し、他のブラウザーでは left をアニメーション化し、新しいブラウザーでは CSS 変換をアニメーション化して作成しました。

それはうまくいくようです。

于 2012-06-04T08:31:15.343 に答える