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/

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

在新的.Animate（）上停止Jquery .Animate（）

1 个答案: