在New.Animate（）上停止Jquery.Animate（）

我正在尝试设置一个弹出框的动画，以显示该区域中要执行的操作的列表

不幸的是，如果您以足够快的速度单击两个或多个框，它会展开所有单击的框，然后锁定这些框，使其不再被选中

你可以点击任何未选中的框，它会工作，但我不能阻止两个框同时出现的问题

我不能100%确定我是否正确使用了.stop命令

请帮忙

这是我的密码。这里还有一个带有一点演示的JSFIDLE链接

---

调用新动画时，请通过clearQueue取消所有预先存在的动画：

---

或者，如果您希望维护某些动画，请仅通过停止停止您不想再运行的动画：

调用新动画时，通过clearQueue取消所有预先存在的动画：

---

或者，如果您想维护某些动画，请仅通过停止停止您不想再运行的动画：

谢谢，我最终在每个.animate（）之前替换了.stop并放置了.clearQueue（）。停止工作，但我认为clearQueue可能更好地使用。如果可以，我会投赞成票，但显然我需要15个代表才能投赞成票。谢谢，我最终在每个.animate（）之前替换了.stop并放置了.clearQueue（）。停止工作，但我认为clearQueue可能更好地使用。如果可以，我会投赞成票，但显然我需要15个代表才能投赞成票。

$(document).ready(function() {
    $("#attractionsbox").css( { width:0 } );
    $("#entertainmentbox").css( { width:0 } );
    $("#diningbox").css( { width:0 } );
    $("#attractionspointer").css( { width:0 } );
    $("#entertainmentpointer").css( { width:0 } );
    $("#diningpointer").css( { width:0 } );
    $("#experiences").css( 'overflowY' , 'hidden' );
});


$("#freefunbutton").click(function() {
    if ($("#freefunbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#freefunpointer").animate({
                    width: 40
                }, 50, function() {
                    $("#freefunbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

$("#attractionsbutton").click(function() {
    if ($("#attractionsbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#attractionspointer").animate({
                    width: 40
                }, 50, function() {
                    $("#attractionsbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

$("#entertainmentbutton").click(function() {
    if ($("#entertainmentbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#entertainmentpointer").animate({
                    width: 40
                }, 50, function() {
                    $("#entertainmentbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});

$("#diningbutton").click(function() {
    if ($("#diningbox").width()) {} else {
        $(".contentbox").stop(true, false).animate({
            width: 0
        }, 200, function() {
            $(".pointer").animate({
                width: 0
            }, 50, function() {
                $("#diningpointer").animate({
                    width: 40
                }, 50, function() {
                    $("#diningbox").animate({
                        width: 500
                    }, 200);
                });
            });
        });
    }
});