Question

我正在尝试使用jQuery的节目和延迟让3个按钮一个接一个地显示，但我觉得我可能试图从错误的角度攻击它。

$(document).ready(function(){
    $("#menu-button").click(function(){
        $("#menu").show().delay(1000);
        $("#option1").show().delay(500);
        $("#option2").show().delay(500);
        $("#option3").show().delay(500);
    });
});

我现在拥有的是什么。

所以我想要发生的是当用户按下带有ID＆＃34;菜单按钮＆＃34;带有id＆＃34;菜单＆＃34;的div将显示，然后每个选项将一个接一个显示。

但是，当我按下菜单按钮时，菜单和选项都会立即显示。

我还没有真正使用过jQuery，所以我可能在这里做错了。

任何帮助都会非常感激，正如我也尝试过的那样，虽然我的文档暗示着这样做，但这并不起作用：

$(document).ready(function(){
    $("#menu-button").click(function(){
        $("#menu").delay(1000).show();
        $("#option1").delay(1500).show();
        $("#option2").delay(2000).show();
        $("#option3").delay(2500).show();
    });
});

编辑：

<body>
<span id="menu-button">TEST</span>
<div class="mobMenu hidden" id="menu">
<button class="hidden" id="option1">1</button>
<button class="hidden" id="option2">2</button>
<button class="hidden" id="option3">3</button>
</div>
</body>

Answer 1

这可能是完成相同任务的更简单方法

$(document).ready(function(){
    var delay = 1000;
    var items = [
        '#menu', '#option1', '#option2', '#option3'
    ];

    $("#menu-button").click(function(){
        $.each(items, function(index, item){
            $(item).show().delay(delay);
            delay += 500;
        });
    });
});

Answer 2

您可以传递将在show function finish完成后调用的函数：

$(document).ready(function(){
    $("#menu-button").click(function(){
        $("#menu").show(1000, function() {
            $("#option1").show(1500, function() {
                 //And so on.
            });
        });
    });
});

希望这有帮助！

如何获得一个接一个地显示的选项

2 个答案: