jquery - 使用animation_enabled bool 值来防止同时使用多个jquery动画在被垃圾邮件发送后会中断

Question

我的页面上有 4 个链接，它们可以淡入和淡出各自的 div，并在必要时调整包含的 div 的高度。我一次只想在一页上显示一个 div，并且加载时可见的 div 是 labels_div。

当用户向这些链接发送垃圾邮件时，div 会不同步或相互重叠。我对此进行了研究，最好的选择是使用一个 bool 变量，该变量在每个链接的点击时进行检查。

问题出现了，当用户向链接发送垃圾邮件时， bool 值最终会停留在 false 上，从而阻止更多的动画。

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

var animation_enabled;
animation_enabled = true;


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

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

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

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

<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>

Answer 1

好吧，我认为问题是我的animation_enabled = false;调用该函数后，该函数位于 if 语句之外，检查您想要的 div 是否可见，这意味着即使 div 可见，它也会将 bool 值设置为 false。

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