使動畫循環

Question

我有一個文本動畫（「再試一次」在小提琴的例子），跳轉的問題是，它的工作只有當頁面加載，我需要它循環。

這裏是小提琴例如： http://jsfiddle.net/uqcLn/49/

var directions = ["-=10px", "+=10px"]; 
    function move(i){ 
     $(".white span").animate({ "left": directions[i] }, 300, function(){ 
      move((i ===0)? 1 : 0); 
     }); 
    } 

    move(0); 

Answer 1

好了...玩這個像一個小時，這是因爲這是我所能得到它後...問題是您的移動功能陷入一個巨大的循環，然後你永遠不會取消它。看看我做了什麼。在第一個動畫的回調中，你再次移動它，但重置樣式，否則它會在向右移動之前移動到左邊。

然後我做了它，所以一旦你再次將鼠標懸停在牆上，它會重置所有內容，一旦你將鼠標懸停在另一個方向上，它就會重新啓動重試功能。 （個人，我認爲你改名類錯了，但無論如何）

你最大的問題是，停止循環是$(".white").html("START HERE!");如果你想與可再次嘗試，那麼你必須確保你改變相同的元素（跨度）。你所做的是覆蓋span html，然後當你嘗試在鼠標上方改變它的功能時，沒有什麼可以改變的。

查看代碼，如果您有任何疑問，請提問。

$(".wall").hover(function() { 
    $(this).css("background", '#000'); 
    //clear the sad face and stop the animation and reset text 
    $('#highlight_lose').fadeOut(1000); 
    $(".white span").removeAttr('style'); 
    $(".white span").clearQueue().stop().finish(); 
    $(".white span").html("START HERE!"); 
}) 

$(".way").bind('mouseenter', function() { 
    $('#highlight_lose').fadeIn(1000); 
    $('.wall').css("background", '#fff'); 
    $(".white span").html("Try again"); 

    function move() { 
     //Animate this way so when its done going left it starts going right. Then when 
     //its done going right clear the style so it goes back to the starting positon 
     //and call it again so it loops until you hit the path. 
     $(".white span").animate({ 
      "margin-left": "-=10px" 
     }, 300, function() { 
      $(".white span").animate({ 
       "margin-left": "+=10px" 
      }, 300, function() { 
       $(".white span").removeAttr('style'); 
       move(); 

      }); 
     }); 
    } 
    //Clear everything before you call move again so it doesnt over animate. 
    $(".white span").removeAttr('style'); 
    $(".white span").clearQueue().stop().finish(); 
    move(); 
}) 

演示：http://jsfiddle.net/uqcLn/55/