1

我正在尝试为推送框设置动画以显示该区域要做的事情的列表。

不幸的是，如果您足够快地单击 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);
                });
            });
        });
    }
});
4

1 回答 1

1

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

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

于 2012-08-27T15:52:25.607 回答