javascript - html div内的动画文本

Question

如何使 div 内的文本（“再试一次”）来回移动？当玩家输掉并且笑脸出现时，我定义箭头中的文本将更改为“重试”，我希望玩家必须点击他才能再次玩。

这是小提琴链接：http: //jsfiddle.net/uqcLn/41/

 $(".way").bind('mouseenter', function() {
      $('#highlight_lose').fadeIn(1000);
      $('.wall').css("background", '#fff');
        $(".white").html("Try again");
  /* this is what i tried */       $(".white").animate({
            "left": "-10px" }, 500);    
    })

Answer 1

为了使您的动画正常工作，您可能需要给 .white 元素一个 position:absolute 。之后，您可以将动画逻辑置于某种循环（或间隔）中来回移动。像：http: //jsfiddle.net/uqcLn/47/

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

 move(0);