When you click the button once the transition is 300 seconds.

What i'm trying to do is when you click the button twice Reset it in 1 second

So what is happening is when you click the button once Margin-Left goes -20000px in 300 seconds ..what i want is when you click it twice it resets Margin-Left to 0 in 1 second not 300.

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;
  }
}

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;
}

<div id="box" class="box">
  <img src=".png" alt="" />
</div>
<div class="linksbox">
  <button onClick="screen()" id="blast">FLY AWAY</button>
</div>
<script src=".7.1.js"></script>

When you click the button once the transition is 300 seconds.

What i'm trying to do is when you click the button twice Reset it in 1 second

So what is happening is when you click the button once Margin-Left goes -20000px in 300 seconds ..what i want is when you click it twice it resets Margin-Left to 0 in 1 second not 300.

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;
  }
}

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;
}

<div id="box" class="box">
  <img src="https://tim-school/codepen/2dgame/wall.png" alt="" />
</div>
<div class="linksbox">
  <button onClick="screen()" id="blast">FLY AWAY</button>
</div>
<script src="https://code.jquery/jquery-3.7.1.js"></script>

• javascript
• html
• jquery
• css
• margin

2 Answers 2

Adding this condition in css should be enough:

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

.box:not(.boxxy) {
  margin-left: 0px;
  transition-duration: 300ms;
}

When you add the class .boxxy the transition-duration: 1s; will be applied and when you remove that class the conditions for .box:not(.boxxy) will be applied.

I recently used CSS variables to achieve a similar goal with CSS animations I was working on.

• You can define CSS variables in the ":root" in your CSS file.
• You can reference the variable in your CSS file directly.
• You can then update the variable in your JS using "getPropertyValue".

I chose to reference the timing string in the variable to determine the state, but feel free to set that up however you like.

I'd also note that the 1s animation runs so fast you can't really see the animation. Setting that speed to 20s, made the animation visible, but it all depends on what you are going for.

Two sidenotes... 1. Sorry for using jQuery, the vanilla JS was giving me issues. 2. I think Ali's answer might be better and simpler, but I think he used 300 "ms" instead of 300 "s". I don't have enough rep to respond but figured I'd mention that.

const btn = document.getElementById("blast");

$(document).ready(function() {

  $(".linksbox").on("click", function() {
    var boxElement = document.getElementById("box"); //get the box element by ID
    var animTiming = window.getComputedStyle(boxElement); //get the styles of the box element
    animTiming = animTiming.getPropertyValue("--custom-anim-speed"); //get the custom CSS anim speed

    if (animTiming == "300s") { //if current anim speed is 300s
      document.documentElement.style.setProperty("--custom-anim-speed", "1s"); //switch CSS variable to 1s
      $(".box").toggleClass("boxxy", 0); //toggle class to adjust margin
      btn.textContent = btn.textContent === "RETURN HOME" ? "FLY AWAY" : "RETURN HOME";
    } else if (animTiming == "1s") { //or if anim speed is 1s
      document.documentElement.style.setProperty("--custom-anim-speed", "300s"); //switch CSS variable to 300s
      $(".box").toggleClass("boxxy", 0); //toggle class to adjust margin
      btn.textContent = btn.textContent === "RETURN HOME" ? "FLY AWAY" : "RETURN HOME";
    }
  })
});

body {
  background-color: #6A6A6A;
}

html,
body {
  height: 100%;
}

:root {
  --custom-anim-speed: 1s;
}

.boxxy {
  margin-left: -20000px;
}

.box {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 20000px;
  height: calc(100% - 100px);
  overflow: hidden;
  transition-timing-function: linear;
  transition-duration: var(--custom-anim-speed);
  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;
}

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="box" class="box">
  <img src="https://tim-school/codepen/2dgame/wall.png" alt="" />
</div>
<div class="linksbox">
  <button onClick="" id="blast">FLY AWAY</button>
</div>