开始和停止使用相同的div（javascript-jquery）

Question

我想在单击同一个div时启动和停止动画。

$('div').click(function(){ 

//if is the first click -->do animation in loop 
//if is the second click--->stop animation 

}); 

你是怎么做到的？

我只解决了动画开始循环：

var play = 0; 

function myAnimateGreen(){ 

     $('green').animate(
      {left:'+250px'}, 
      1000, 
      );   
     while(play==1) {myAnimateGreen();} 
    } 

$('green').click(function(){ 
    play = 1; 
    myAnimateGreen();} 
}); 

但我不能消除Stop！

Answer 1

可以使用:animated选择检测如果动画正在发生

$('div').click(function(){ 
    if(!$(".green").is(':animated')) { 
     //Do animation 
    } else { 
     //Stop animation 
    } 
}); 

Answer 2

function animateGreen(el) { 
    var delay = 500, 
     time = 1000, 
     distance = 150; 
    el.animate({left:'+='+distance+'px'}, time, "linear"); 
    el.data("anim_green", setTimeout(animateGreen, time+delay, el)); 
} 

$('green').click(function() { 
    var self = $(this); 
    if (self.data("anim_green")) { 
     clearTimeout(self.data("anim_green")); 
     self.data("anim_green", false); 
     return; 
    } 
    animateGreen(self); 
}); 

应该这样做，只是贴！证明：http://jsbin.com/ajagij/3/edit