開始和停止使用相同的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