javascript - 在多个项目上停止 jquery 动画

Question

我有一个函数可以在调用时触发一系列动画。我希望能够在单击链接时停止所有动画。代码如下：

var slogan = false;
function slogan_slide(){
    slogan = true;
    if($('#slogan').is(':visible')){
        $('#slogan_1').fadeIn(500);
        $('#slogan_2').delay(1300).fadeIn(500);
        $('#slogan_3').delay(2600).fadeIn(500);
        $('#slogan_4').delay(3900).fadeIn(500, function(){
            $('#slogan_1').delay(3000).hide();
            $('#slogan_2').delay(3000).hide();
            $('#slogan_3').delay(3000).hide();
            $('#slogan_4').delay(3000).fadeOut(500, function(){
                $('#home_content').fadeIn(500);
                slogan = false;
            });
         });
     }
}

function slogan_stop(){
    $('#slogan_1').stop(true).fadeOut(500);
    $('#slogan_2').stop(true).fadeOut(500);
    $('#slogan_3').stop(true).fadeOut(500);
    $('#slogan_4').stop(true).fadeOut(500);
    $('#home_content').stop(true).fadeOut(500); 
}

$(document).on('click','a', function(){
    if(slogan) slogan_stop();
});

这会停止所有动画，除了#home_content 上的回调到fadeIn。如何防止该回调发生？