вызвать анимацию по щелчку, а другая анимация в процессе

Question

Пожалуйста, обратитесь к jsfiddle моей работы 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}); 
}); 

}); 

Здесь каждая функция щелчка будет вызывать только после того, как предыдущая анимация завершена. Я хочу разбить анимацию и вызвать функцию щелчка, как только я нажму на них. Пожалуйста помоги.

Спасибо!

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}); 
}); 

});