防止jquery解决方案中的多个动画在垃圾邮件链接后中断

我在我的页面上有4个链接，它们将各自的div淡入淡出，并在必要时调整包含div的高度

当用户对这些链接进行垃圾邮件处理时，div会失去同步或相互重叠。我已经对此进行了研究，两种可能的选择是使用.stop（）方法或一个布尔变量，单击每个链接时会选中该变量

我试着实现这两个目标，但没有任何乐趣。它们确实可以一次阻止多个功能的发生，但在尝试对链接发送垃圾邮件之后，它们最终会中断链接，而不会使任何内容淡入淡出

有人能解释一下我做错了什么吗？谢谢

var animation_enabled;
animation_enabled = 0;


function open_labels_div(){
    if(animation_enabled == 1){
        return;
    }
    else{
        animation_enabled = 1;
        if($("#labels_div").is(':hidden')){
            if($("#charts_div").is(':visible')){
                $("#charts_div").fadeOut(400, function() {
                    $("#labels_div").fadeIn(400, function (){
                        $("#charts_div").css("display","none");
                        $("#labels_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
            else if($("#blank_charts_div").is(':visible')){
                $("#blank_charts_div").fadeOut(400, function() {
                    $("#labels_div").fadeIn(400, function (){
                        $("#blank_charts_div").css("display","none");
                        $("#labels_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
            else if($("#reorder_div").is(':visible')){
                var minus = $("#reorder_div").height()-100;
                $('#tab_content').animate({'height': '-='+minus},800,"linear", function() {
                    $("#reorder_div").fadeOut(400);
                    $("#labels_div").fadeIn(800, function (){
                        $("#reorder_div").css("display","none");
                        $("#labels_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
        }
    }
}

function open_charts_div(){
    if(animation_enabled == 1){
        return;
    }
    else{
        animation_enabled = 1;
        if($("#charts_div").is(':hidden')){
            if($("#labels_div").is(':visible')){
                $("#labels_div").fadeOut(400, function() {
                    $("#charts_div").fadeIn(400, function (){
                        $("#labels_div").css("display","none");
                        $("#charts_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
            else if($("#blank_charts_div").is(':visible')){
                $("#blank_charts_div").fadeOut(400, function() {
                    $("#charts_div").fadeIn(400, function (){
                        $("#blank_charts_div").css("display","none");
                        $("#charts_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
            else if($("#reorder_div").is(':visible')){
                var minus = $("#reorder_div").height()-100;
                $('#tab_content').animate({'height': '-='+minus},800,"linear", function() {
                    $("#reorder_div").fadeOut(400);
                    $("#charts_div").fadeIn(400, function (){
                        $("#reorder_div").css("display","none");
                        $("#charts_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
        }
    }
}

function open_blank_charts_div(){
    if(animation_enabled == 1){
        return;
    }
    else{
        animation_enabled = 1;
        if($("#blank_charts_div").is(':hidden')){
            if($("#labels_div").is(':visible')){
                $("#labels_div").fadeOut(400, function() {
                    $("#blank_charts_div").fadeIn(400, function (){
                        $("#labels_div").css("display","none");
                        $("#blank_charts_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
            else if($("#charts_div").is(':visible')){
                $("#charts_div").fadeOut(400, function() {
                    $("#blank_charts_div").fadeIn(400, function (){
                        $("#charts_div").css("display","none");
                        $("#blank_charts_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
            else if($("#reorder_div").is(':visible')){
                var minus = $("#reorder_div").height()-100;
                $('#tab_content').animate({'height': '-='+minus},800,"linear", function() {
                    $("#reorder_div").fadeOut(400);
                    $("#blank_charts_div").fadeIn(400, function (){
                        $("#reorder_div").css("display","none");
                        $("#blank_charts_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                });
            }
        }
    }
}

function open_reorder(){
    if(animation_enabled == 1){
        return;
    }
    else{
        animation_enabled = 1;
        if($("#reorder_div").is(':hidden')){
            var add = $("#reorder_div").height()-100;
            $('#tab_content').animate({'height': '+='+add},800,"linear", function() {
                if($("#labels_div").is(':visible')){
                    $("#labels_div").fadeOut(400);
                    $("#reorder_div").fadeIn(400, function (){
                        $("#labels_div").css("display","none");
                        $("#reorder_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                }
                else if($("#charts_div").is(':visible')){
                    $("#charts_div").fadeOut(400);
                    $("#reorder_div").fadeIn(400, function (){
                        $("#charts_div").css("display","none");
                        $("#reorder_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                }
                else if($("#blank_charts_div").is(':visible')){
                    $("#blank_charts_div").fadeOut(400);
                    $("#reorder_div").fadeIn(400, function (){
                        $("#blank_charts_div").css("display","none");
                        $("#reorder_div").css("display","inline-block");
                        animation_enabled = 0;
                    });
                }
            });
        }
    }
}

<div id='options_tabs'>
    <ul>
        <li onclick='open_labels_div()'><a>Labels</a></li>
        <li onclick='open_charts_div()'><a>Charts</a></li>
        <li onclick='open_blank_charts_div()'><a>Blank Charts</a></li>
        <li onclick='open_reorder()'><a>Reorder</a></li>
    </ul>
</div>
<div id='tab_content'>
    <div id='labels_div'>
        <p>labels content</p>
    </div>
    <div id='charts_div'>
        <p>charts content</p>
    </div>
    <div id='blank_charts_div'>
        <p>blank charts content</p>
    </div>
    <div id='reorder_div'>
        <p>reorder content</p>
    </div>
</div>

var动画已启用；
动画_启用=0；
函数open_labels_div（）{
如果（已启用动画==1）{
回来
}
否则{
动画_enabled=1；
如果（$（“#labels_div”）是（':hidden'））{
如果（$（“#图表_div”）是（':visible'））{
$（“#图表分区”）。淡出（400，函数（）{
$（“#labels_div”）.fadeIn（400，函数（）{
$（“#charts_div”）.css（“display”、“none”）；
$（“#labels_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
如果（$（“#空白#图表_div”）是（':visible'））{
$（“#空白#图表_div”）。淡出（400，函数（）{
$（“#labels_div”）.fadeIn（400，函数（）{
$（“#空白图表_div”）.css（“显示”、“无”）；
$（“#labels_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
如果（$（“#reorder_div”）是（'：visible'），则为else{
var减号=$（“#重新排序分区”）.height（）-100；
$（'tab_content'）。动画（{'height'：'-='+减号}，800，“线性”，函数（）{
美元（“#再订购部门”）。淡出（400）；
$（“#labels_div”）.fadeIn（800，函数（）{
$（“#reorder_div”）.css（“显示”、“无”）；
$（“#labels_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
}
}
}
函数open\u charts\u div（）{
如果（已启用动画==1）{
回来
}
否则{
动画_enabled=1；
如果（$（“#图表_div”）是（':hidden'））{
如果（$（“#labels_div”）是（'：visible'））{
$（“#labels_div”）.fadeOut（400，function（）{
$（“图表分区”）.fadeIn（400，函数）{
$（“#labels_div”）.css（“display”、“none”）；
$（“#charts_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
如果（$（“#空白#图表_div”）是（':visible'））{
$（“#空白#图表_div”）。淡出（400，函数（）{
$（“图表分区”）.fadeIn（400，函数）{
$（“#空白图表_div”）.css（“显示”、“无”）；
$（“#charts_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
如果（$（“#reorder_div”）是（'：visible'），则为else{
var减号=$（“#重新排序分区”）.height（）-100；
$（'tab_content'）。动画（{'height'：'-='+减号}，800，“线性”，函数（）{
美元（“#再订购部门”）。淡出（400）；
$（“图表分区”）.fadeIn（400，函数）{
$（“#reorder_div”）.css（“显示”、“无”）；
$（“#charts_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
}
}
}
函数open\u blank\u charts\u div（）{
如果（已启用动画==1）{
回来
}
否则{
动画_enabled=1；
如果（$（“#blank_charts_div”）。是（':hidden'））{
如果（$（“#labels_div”）是（'：visible'））{
$（“#labels_div”）.fadeOut（400，function（）{
$（“#空白#图表_div”）.fadeIn（400，函数（）{
$（“#labels_div”）.css（“display”、“none”）；
$（“#空白#u图表_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
如果（$（“#图表_div”）为（'：可见），则为else{
$（“#图表分区”）。淡出（400，函数（）{
$（“#空白#图表_div”）.fadeIn（400，函数（）{
$（“#charts_div”）.css（“display”、“none”）；
$（“#空白#u图表_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
如果（$（“#reorder_div”）是（'：visible'），则为else{
var减号=$（“#重新排序分区”）.height（）-100；
$（'tab_content'）。动画（{'height'：'-='+减号}，800，“线性”，函数（）{
美元（“#再订购部门”）。淡出（400）；
$（“#空白#图表_div”）.fadeIn（400，函数（）{
$（“#reorder_div”）.css（“显示”、“无”）；
$（“#空白#u图表_div”）.css（“显示”、“内联块”）；
动画_启用=0；
});
});
}
}
}
}
函数open_reorder（）{
如果（已启用动画==1）{
回来
}
否则{
动画_enabled=1；
如果（$（“#reorder_div”）是（':hidden'））{
var add=$（“#重新排序_div”）.height（）-100；
$（'tab_content'）。动画（{'height'：'+='+add}，800，“linear”，function（）{
如果（$（“#labels_div”）是（'：visible'））{
美元("标签").淡出(400);；
<div id='options_tabs'>
    <ul>
        <li id="labels"><a>Labels</a></li>
        <li id="charts"><a>Charts</a></li>
        <li id="blank_charts"><a>Blank Charts</a></li>
        <li id="reorder"><a>Reorder</a></li>
    </ul>
</div>
<div id='tab_content'>
    <div id='labels_div'>
        <p>labels content</p>
    </div>
    <div id='charts_div'>
        <p>charts content</p>
    </div>
    <div id='blank_charts_div'>
        <p>blank charts content</p>
    </div>
    <div id='reorder_div'>
        <p>reorder content</p>
    </div>
</div>

var animation_enabled;
animation_enabled = 0;

// On click event, call "changeDivs" function
$("#options_tabs ul li").click(changeDivs);

// changeDivs function
function changeDivs() {
    // If the flag is true, animation is running, so trying to launch another one
    if(animation_enabled == 1){
        return;
    } else {
        // If not currently animating, do the div visibility change
        animation_enabled = 1;

        // 1st - get the id of the li item clicked (calling the function, so I used this)
        var originItem = $(this).attr('id');
        // Then set a variable which is the content div that will be visible
        var destinationDiv = $("#" + originItem + "_div");

        // Here I will fadeOut all div inside tab_content which are not #myLiItemName_div, and wait the end of the fade with promise(), then fadeIn the div #myLiItemName_div
        $("#tab_content div:not(#" + originItem + "_div)").fadeOut(750).promise().done(function() {
            destinationDiv.fadeIn(800).promise().done(function() { 
                animation_enabled = 0; });;
        });        
    }
}

<div id='options_tabs'>
    <h3>Labels</h3>
    <div>Labels content</div>
    <h3>Charts</h3>
    <div>Charts content</div>
    <h3>Blank Charts</h3>
    <div>Blank Charts content</div>
    <h3>Reorder</h3>
    <div>Reorder content</div>
</div>

$( "#options_tabs" ).accordion();