使动画循环

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/