試圖獲得一個簡單的動畫重置到其起始位置，然後再次開始。

Question

基本上，試圖讓一個基本的滑動條越過頁面越過一段時間，然後當它到達最後，向後滑動並重新開始。我可以讓它滑回去，而不是重新開始。非常感謝。

這裏是我正在談論的：http://jsfiddle.net/tG7Gm/282/以及下面的代碼。

的CSS：

.slider { 
height:0; 
width:16.6%; 
z-index:31; 
padding-top:1%; 
background-color:#398235; 
position:relative; 
} 

.base { 
text-align:left; 
height:0; 
width:100%; 
z-index:30; 
padding-top:1%; 
border-top:1px solid #398235; 
background-color:#c9de96; 
-moz-box-shadow: 3px 3px 5px #888; 
-webkit-box-shadow: 3px 3px 5px #888; 
box-shadow: 3px 3px 5px #888; 
} 

的HTML：

<div class="base"> 
       <div class="slider"><br></div> 
      </div> 

中的JavaScript：

var x = 0; 

var resetSlide = function() { 
$('.slider').animate({left:'-=83.3%'}, 1000) 

if (x === 0) { 
    intervalID(); 
    } 
} 


var intervalID = setInterval(function() { 

$('.slider').animate({left:'+=16.66%'}, 1000) 

if (++x === 5) { 
    window.clearInterval(intervalID); 
    x = 0; 
    resetSlide();  
} 
}, 3500); 



$(intervalID()); 

Answer 1

您使用intervalID的功能，但它是整數，我已經更新了你的代碼jsfiddle

var x = 0; 

var resetSlide = function() { 
    $('.slider').animate({left:'-=83.3%'}, 1000) 

    if (x === 0) { 

     go(); 
    } 
} 

function go(){ 
var intervalID = setInterval(function() { 

    $('.slider').animate({left:'+=16.66%'}, 1000) 

    if (++x === 5) { 
     window.clearInterval(intervalID); 
     x = 0; 
     resetSlide();  
    } 
}, 35000); 

} 
go();