Q: i'm running into some animation code that has worked in the past but currently is not executing I have some code that has worked for me in the past but is currently not executing.
I honestly don't think the problem is in the Javascript but instead is either in the HTML or CSS. After all, I just copied and pasted the code and changed what was needed but I think I made a mistake in the HTML or CSS.
I just don't know where or if it is even something in them or if it's just my lack of experience with coding. I'll get to the code itself now.


if (moveKey.key === 's') {
  $("div").animate({
    top: "150px"
  });
}
.sign {
  position: absolute;
  color: green;
  width: 100px;
  height: 100px;
  left: 10px;
}

div {
  position: absolute;
  top: 100px;
  left: 400px;
  font-size: 100px;
  color: red;
}

h2 {
  position: absolute;
  left: 400px;
  top: 130px;
  font-size: 50px;
}

h3 {
  position: absolute;
  left: 480px;
  top: 132px;
  font-size: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>Hello</div>
<h2>and</h2>
<h3>welcome</h3>
<div id="sign" class="sign"></div>


and here's a link to the fiddle if you want it.

A: I've added an event listener around your code so clicking 's' would work.


window.addEventListener('keydown', function(moveKey) {
  if (moveKey.key === 's') {
    $("div").animate({
      top: "150px"
    });
  }
})
.sign {
  position: absolute;
  color: green;
  width: 100px;
  height: 100px;
  left: 10px;
}

div {
  position: absolute;
  top: 100px;
  left: 400px;
  font-size: 100px;
  color: red;
}

h2 {
  position: absolute;
  left: 400px;
  top: 130px;
  font-size: 50px;
}

h3 {
  position: absolute;
  left: 480px;
  top: 132px;
  font-size: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>Hello</div>
<h2>and</h2>
<h3>welcome</h3>
<div id="sign" class="sign"></div>


