用JS重置CSS3計時功能

Question

當幻燈片到達第二個“ 1”時，我需要它無縫地重置為幻燈片“ 2”，並給人以無限旋轉木馬的印象，

演示：

http://jsfiddle.net/benhowdle89/cWTbn/

編碼：

$('.wrapper li:first').clone().appendTo($('.wrapper ul'));
var element = $('.wrapper')[0];
element.setAttribute('data-left', 0);
setInterval(function() {
    var mL = +element.getAttribute('data-left'), t = +$('.wrapper').css('width').replace('px', ''), w = +$('.wrapper li:first').outerWidth();
    if(t == (Math.abs(mL) + w)){
        element.style.webkitTransitionTimingFunction = "none";
        element.style.webkitTransform = "none";
        element.setAttribute('data-left', 0);
    }
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    var currentL = +element.getAttribute('data-left');
    var newL = +(currentL + w);
    element.style.webkitTransform = "translate3d(-" + (newL) + "px, 0, 0)";
    element.setAttribute('data-left', newL);
}, 2000);

問題：

在幻燈片“ 1”之后，它會動畫返回幻燈片“ 2”，因此我不需要這樣做，而是要向后滑動到幻燈片“ 2”（對用戶不可見），

有任何想法嗎？

Answer 1

將動畫移到單獨的類。 由於您已經在使用jQuery，因此可以使用以下代碼：

$('.animiationClass').removeClass('animationClass').addClass('animationClass');