CODEWITHSUNDEEP
javascripthtmlcssanimation
krrish
krrish

Reputation: 343

Issue with Animation in JavaScript

I'm trying to complete the animation in JavaScript, but all is working perfectly fine, except the last stage, I've typed the code for the inner box to move left, still, it goes up, out of the box. Please help by pointing out whats going wrong. The problem lies with the function moveleftagain();, the last function. But I've clearly instructed it to go left, still it goes left. Please do help.

var ctr = 0;
var ctr2 = 0;
var inner = document.getElementById('in');
var t = setInterval(moveright, 10);

function moveright() {
  if (ctr == 150) {
    clearInterval(t);
  } else {
    ctr += 1;
    inner.style.left = ctr + "px";
  }
}
var t2 = setInterval(movedown, 10);

function movedown() {
  if (ctr == 150) {
    if (ctr2 == 150) {
      clearInterval(t2);
    } else {
      ctr2 += 1;
      inner.style.top = ctr2 + "px";
    }
  }
}
var t3 = setInterval(moveleft, 10);

function moveleft() {
  if (ctr2 == 150) {
    if (ctr == 0) {
      clearInterval(t3);
    } else {
      ctr -= 1;
      inner.style.left = ctr + "px";
    }
  }
}
var t4 = setInterval(moveup, 10);
var check = false;
var checkdiag = false;

function moveup() {
  if (ctr == 0) {
    if (ctr2 == 0) {
      clearInterval(t4);
      check = true;
    } else {
      ctr2 -= 1;
      inner.style.top = ctr2 + "px";
    }
  }
}
var t5 = setInterval(movediagonalright, 10);

function movediagonalright() {
  if (check == true) {
    if (ctr == 150) {
      clearInterval(t5);
      checkdiag = true;
    } else {
      ctr += 1;
      ctr2 += 1;
      inner.style.left = ctr + "px";
      inner.style.top = ctr2 + "px";
    }
  }
}
var t6 = setInterval(moveleft2, 10);
var checkdiagleft = false;

function moveleft2() {
  if (checkdiag == true) {
    if (ctr == 0) {
      clearInterval(t6);
      checkdiagleft = true;
    } else {
      ctr -= 1;
      inner.style.left = ctr + "px";
    }
  }
}

var t7 = setInterval(movediagonalrightup, 10);
var checkdiagright = false;

function movediagonalrightup() {
  if (checkdiagleft == true) {
    if (ctr == 150) {
      clearInterval(t5);
      checkdiagright = true;
    } else {
      ctr += 1;
      ctr2 -= 1;
      inner.style.left = ctr + "px";
      inner.style.top = ctr2 + "px";
    }
  }
}
var t7 = setInterval(moveleftagain, 10);

function moveleftagain() {
  if (checkdiagright == true) {
    if (ctr == 0) {
      clearInterval(t7);
    } else {
      ctr -= 1;
      inner.style.left = ctr + "px";
    }
  }
}
<html>

<head>
  <title></title>
  <style type="text/css">
    #out {
      height: 200px;
      width: 200px;
      background: #FF0000;
      position: relative;
    }
    
    #in {
      height: 50px;
      width: 50px;
      background: #000000;
      position: absolute;
    }
  </style>
</head>

<body>

  <div id="out">
    <div id="in"></div>
  </div>

</body>

</html>

Upvotes: 0

Views: 52

Answers (1)

fila90
fila90

Reputation: 1459

movediagonalrightup keeps running and increments ctr by 1 while you try to decrement it in moveleftagain

you probably want to clearInterval(t7); in movediagonalrightup. also this var t7 = setInterval(moveleftagain, 10); should be var t8 = setInterval(moveleftagain, 10); you have two t7

here's a working fiddle so you can play with

Upvotes: 2

Related Questions