Rand Zurücksetzen auf 0 in 1 Sekunde auf 0 ⇐ HTML

[Guest]

Wenn Sie auf die Schaltfläche klicken, sobald der Übergang 300 Sekunden beträgt. Br /> Also, was passiert, wenn Sie auf die Schaltfläche klicken, sobald der Rand in 300 Sekunden –20000px geht. Was ich möchte, wenn Sie doppelt darauf klicken, werden die Margen-Links in 1 Sekunde nicht 300 auf 0 Sekunde zurückgesetzt. < /p>

Code: Select all

var clicked1 = 0;
const btn = document.getElementById("blast")

function screen() {
if (clicked1 == 0) {
$(".box").toggleClass("boxxy", 0);
btn.textContent = btn.textContent === "RETURN HOME" ? "FLY AWAY" : "RETURN HOME";
clicked1 = 1;
} else if (clicked1 == 1) {
$(".box").toggleClass("boxxy", 0);
btn.textContent = btn.textContent === "RETURN HOME" ? "FLY AWAY" : "RETURN HOME";
clicked1 = 0;
}
}< /code>
body {
background-color: #6A6A6A;
}

html,
body {
height: 100%;
}

.boxxy {
margin-left: -20000px;
transition-duration: 1s;
}

.box {
position: fixed;
top: 0px;
left: 0px;
width: 20000px;
height: calc(100% - 100px);
overflow: hidden;
transition-timing-function: linear;
transition-duration: 300s;
z-index: 5;
}

.box img {
height: 100%;
width: 100%;
}

.linksbox {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
text-align: center;
background-color: #000000;
font-size: 25px;
color: #AEBC1F;
}< /code>

[img]https://tim-school.com/codepen/2dgame/wall.png[/img]

FLY AWAY