«L» направление анимация javascript

Question

Я хочу, чтобы моя анимация имела направление «L». Подойдя вниз, он будет двигаться вправо. но когда я пытаюсь это сделать, он движется только по диагонали.

(function() {  
    var speed = 50, 
     walkingCat = document.getElementById("catwalk"), 
     catWalk = function() {  
      left = walkingCat.offsetLeft, 
      moveBy = 10;  
      walkingCat.style.left = left + moveBy + "px";  
     if (left > 850) { 
      clearInterval(timer); 
     } 
    };  
    var timer = setInterval(catWalk, speed);   
    var catWalkDown = function() {    
     var top = walkingCat.offsetTop, 
      moveBy = 10;  
      walkingCat.style.top = top + moveBy + "px";  
     if (top > 850) { 
      clearInterval(timer2); 
     } 
    };  
    var timer2 = setInterval(catWalkDown, speed);  
}()); 

Answer 1

Попробуйте

ПУТЬ

Html

<div id="catwalk" style="position:relative;width:5px;height:5px;background:black"> </div> 

И в JS

(function() { 
    var speed = 50, 
    walkingCat = document.getElementById("catwalk"), 
    timer =null, 
    catWalk = function() { 
     left = walkingCat.offsetLeft, 
     moveBy = 10; 
     walkingCat.style.left = left + moveBy + "px"; 
    if (left > 550) { 
     clearInterval(timer); 
    } 
}; 
var catWalkDown = function() { 

    var top = walkingCat.offsetTop, 
     moveBy = 10; 

     walkingCat.style.top = top + moveBy + "px"; 

    if (top > 550) { 
     clearInterval(timer2); 
     timer = setInterval(catWalk, speed); 
    } 
}; 
var timer2 = setInterval(catWalkDown, speed); }());