Question

由于存在很多误解，因此编辑了整个问题[11:11，24-02-2019]

首先，当按下按钮时，将发生过渡。

现在，我想在按下按钮并发生过渡时禁用所有按钮。转换完成后，应该再次启用所有按钮。

以下是说明我的问题的视频：https://jsfiddle.net/sebastian3495/o78jktcL/

Javascript ：（按钮有两种类型）

$(".left-btn").click(() => {
    var current = $("section:nth-child(1)").css("margin-left");

    var new_value = (parseInt(current.replace(/px/,"")) + $("section")[1].offsetWidth) + "px";

    $("section:nth-child(1)").css("margin-left", new_value)
});

$(".right-btn").click(() => {
    var current = $("section:nth-child(1)").css("margin-left");

    var new_value = (parseInt(current.replace(/px/,"")) - $("section")[1].offsetWidth) + "px";

    console.log(current, new_value);

    $("section:nth-child(1)").css("margin-left", new_value)
});

问题如您在此处看到的，https://gyazo.com/b4662038419865ba57e85ca29c3d8a8e的出现是因为您可以在转换完成之前再次单击任何按钮，从而使卡错位。

转换结束后，这些卡片被错位了，您会看到两种不同的卡片，例如本例：enter image description here我想避免这种情况。

这是一个完整的小提琴。玩吧；你能解决吗？ https://jsfiddle.net/sebastian3495/y3nume0p/49/

我建议您将JsFiddle视图设置更改为以下内容： enter image description here

Answer 1

您可以使用设置超时功能，该功能需要等待两秒钟，以完成转换并重新启用按钮，如下面的代码所示。

<a>

这将禁用页面上的所有按钮，直到完成转换。

您可以在此处查看小提琴：https://jsfiddle.net/yw5vmt07/1/

过渡时禁用所有按钮-之后再次启用所有按钮

1 个答案: