如何使按钮在第一次单击时消失，等待，然后在几秒钟后出现在另一个位置？答案

【问题标题】：How to make a button disappear on first onclick, wait, then appear a few seconds later in another position?如何使按钮在第一次单击时消失，等待，然后在几秒钟后出现在另一个位置？
【发布时间】：2025-12-25 00:30:06
【问题描述】：

我创建了一个按钮（#nextbtn），当它被点击时会淡出。我如何让它等待，比如 3 秒，然后在之前的 100 像素以下淡出？并在每次单击时继续执行此操作？这是我到目前为止所拥有的： CSS：

 #nextbtn {
               transition: margin-top 1s, opacity 1s;
                opacity:1;
            }

HTML：

<button id="nextbtn" onclick="nextClicked()">NEXT</button>

JS：

function nextClicked() {
                var next = document.getElementById("nextbtn")
                next.style.opacity = "0"
                next.style.marginTop = "-30px"
            }

【问题讨论】：

标签： javascript html function onclick transition

【解决方案1】：

代码如下：

使用 top [ position: relative] 而不是使用边距 im

    var next = document.getElementById("nextbtn");
var top1 = 0;

function nextClicked() {

next.style.opacity = "0";

setTimeout(()=>{
top1 += 100;
next.style.opacity = "1";
next.style.top = top1 + "px";

},3000);// 3 sec
}

    #nextbtn {
transition: margin-top 1s, opacity 1s;
position: relative;
top: 0px;
}

&lt;button id="nextbtn" onclick="nextClicked()"&gt;NEXT&lt;/button&gt;

【讨论】：