觸發動畫上的點擊，而另一個動畫正在進行

Question

請看到我的工作https://jsfiddle.net/a013rn4L/2/

$(document).ready(function(){ 
$(".two").click(function(){ 
    $(".panelBody").animate({ 
    marginLeft: "-400px" 
    }, {duration: 2000, easing: 'easeOutExpo', queue: true}); 
}); 

$(".three").click(function(){ 
$(".two").unbind(); 
    $(".panelBody").animate({ 
    marginLeft: "-800px" 
    }, {duration: 2000, easing: 'easeOutExpo', queue: true}); 
}); 

$(".one").click(function(){ 
    $(".panelBody").animate({ 
    marginLeft: "-1000px" 
    }, {duration: 2000, easing: 'easeOutExpo', queue: true}); 
}); 

}); 

的的jsfiddle這裏每點擊功能將觸發只有在以前的動畫完成。我想打破動畫，並點擊它們就觸發點擊功能。請幫忙。

謝謝！

Answer 1

使用.stop（）方法

$(document).ready(function(){ 
$(".two").click(function(){ 
    $(".panelBody").stop(true, true).animate({ 
    marginLeft: "-400px" 
    }, {duration: 2000, easing: 'easeOutExpo', queue: true}); 
}); 

$(".three").click(function(){ 
    $(".panelBody").stop(true, true).animate({ 
    marginLeft: "-800px" 
    }, {duration: 2000, easing: 'easeOutExpo', queue: true}); 
}); 

$(".one").click(function(){ 
    $(".panelBody").stop(true, true).animate({ 
    marginLeft: "-1000px" 
    }, {duration: 2000, easing: 'easeOutExpo', queue: true}); 
}); 

});