在新的.Animate()上停止Jquery .Animate()

Question

我正在尝试用动画效果来显示在该区域要做的事情的列表。

不幸的是，如果你以足够快的速度点击2个或更多的框，它会展开所有点击的框，然后锁定这些框，使其无法再次被选中。

您可以单击任何未选中的框，但我无论如何也无法阻止其中两个框同时出现的问题。

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

请帮帮我！

这是我的代码。这里还有一个带有一些演示的jsfiddle链接。http://jsfiddle.net/hceFT/4/

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

Answer 1

当你调用一个新的动画时，通过clearQueue：http://api.jquery.com/clearQueue/取消所有预先存在的动画

或者如果你想维护一些动画，只需要通过stop：http://api.jquery.com/stop/停止那些你不想再运行的动画