How to move smoothly a character in Javascript (without Canvas)

Question

I'm kinda struggling to animate a character in a js game i'm currently trying to develop. I can't use canvas so it's only DIVs. With the current functions, i can move my character left / right but it's not smooth at all, it's kind of "step by step". I've been looking for answers but the only solutions i've found uses canvas.

Here's my code (works better in fullscreen but kinda glitched with positions) :

function avancerRight()
{
	var batman=document.getElementById("batman");
	x=batman.style.left;
	
		batman.className="dirDroite";
		batman.style.left=parseInt(x)+10+"px";

	return false;
}

function avancerLeft()
{
	console.log("dedede");
	var batman=document.getElementById("batman");
	x=batman.style.left;
	
		batman.className="dirGauche";
		batman.style.left=parseInt(x)-10+"px";

	return false;
}



var jumpHeight = 200;
var jumping = false;
function jump() {
                        
  if (!jumping) {
    jumping = true;
    setTimeout(land, 500);
  }

  if (jumping) {
    y=batman.style.top;

		batman.style.top=parseInt(y)-jumpHeight+"px";
  }
}

function land()
{
	jumping=false;

	y=batman.style.top;

	batman.style.top=parseInt(y)+jumpHeight+"px";
}

body {
	padding: 0;
	margin: 0;
	background: url('http://image.noelshack.com/fichiers/2015/16/1428996568-bg.png');
	background-color: #B4381F;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    background-position: 50% 30%; 

}

#batman{
	background-image:url('http://image.noelshack.com/fichiers/2015/16/1428996568-batman.png');
	width:85px;
	height:85px;
	display:block;
	background-repeat: no-repeat;
	position:absolute;
	margin-top: -80px;
}

.dirDroite{
	background-position: -95px 0px;
}

.dirGauche{
	background-position: 0px 0px;
}

#fullbody {
	margin: auto;
	width: 100%;
	height: 100%;
}

#floor {
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
	background: url("http://image.noelshack.com/fichiers/2015/16/1428996568-platform5.png");
	background-repeat: repeat-x;
	background-size: 100% 100%;
	height: 126px;
	
}

#base {
	position: absolute;
    right: 0;
    bottom: 80px;
    left: 0;
    z-index: 200;
	margin: auto;
	background: url('http://image.noelshack.com/fichiers/2015/16/1428996568-thefloor.png');
	background-size: cover;
	height: 70.56px;
	width: 846.72px;
	margin-top : 13.2vh;
}



#perspectiveGauche{
	margin-top : 15vh;
	-webkit-perspective: 4vh;
    perspective: 4vh;
    position: absolute;
    width: 45vw;
    perspective-origin: 50% 0%;
}

#rectangleHautGaucheH{
	margin-left: 13.22vh;
	width: 28.87vw;
	height: 2vh;
	background-color: #854305;
    -webkit-transform: rotateX(2deg);
    transform: rotateX(2deg);
}

#rectangleBasGaucheH{
	width: 29.1vw;
	margin-left: 13vh;
	height: 3vh;
	background-color: #663303; 
}

#perspectiveGaucheBasse{
	margin-top : 15vh;
	-webkit-perspective: 0.1vh;
    perspective: 0.1vw;
    position: absolute;
    width: 45vw;
    perspective-origin: 50% 0%;
}

#rectangleHautGaucheB{
	margin-top: 38vh;
	margin-left: 28vh;
	width: 15vw;
	height: 0.25vh;
	background-color: #854305;
    -webkit-transform: rotateX(2deg);
    transform: rotateX(2deg);
}

#rectangleBasGaucheB{
	margin-top: 0.6vh;
	width: 15.25vw;
	margin-left: 27.75vh;
	height: 3vh;
	background-color: #663303; 
}

#perspectiveDroite{
	-webkit-perspective: 4vh;
    perspective: 4wh;
    position: absolute;
    width: 39.6vw;
    height: 2vh;
    margin-top: 15vh;
    perspective-origin: 200% 0%;
}

#rectangleHautDroitH{
	margin-left: 125vh;
	width: 28.7vw;
	height: 2vh;
	background-color: #854305;
    -webkit-transform: rotateX(2deg);
    transform: rotateX(2deg);
}

#rectangleBasDroitH{
	width: 28.9vw;
	margin-left: 124.8vh;
	height: 3vh;
	background-color: #663303; 
}

#rectangleHautDroiteB{
	margin-top: 37vh;
	margin-left: 133vh;
	width: 22vw;
	height: 2vh;
	background-color: #854305;
    -webkit-transform: rotateX(2deg);
    transform: rotateX(2deg);
}

#rectangleBasDroiteB{
	margin-top: 0.2vh;
	width: 22.18vw;
	margin-left: 132.8vh;
	height: 3vh;
	background-color: #663303; 
}

#perspectiveMilieu{
	-webkit-perspective: 4vh;
    perspective: 4wh;
    position: absolute;
    width: 39.6vw;
    height: 2vh;
    margin-top: 15vh;
    perspective-origin: 130% 0%;
 
}

#rectangleHautMilieu{
	margin-top: 21vh;
	margin-left: 68.95vh;
	width: 34.5vw;
	height: 2vh;
	background-color: #854305;
    -webkit-transform: rotateX(2deg);
    transform: rotateX(2deg);
    
}

#rectangleBasMilieu{
	margin-top: 0.1vh;
	width: 34.77vw;
	margin-left: 68.7vh;
	height: 3vh;
	background-color: #663303; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LEVEL 1 NEGRILLON</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="scripts/script.js" ></script>
</head>
<body>


<div id="fullbody">

	<div id="perspectiveGauche">
		<div id="rectangleHautGaucheH"></div>
		<div id="rectangleBasGaucheH"></div>
	</div>
	<div id="perspectiveGaucheBasse">
		<div id="rectangleHautGaucheB"></div>
		<div id="rectangleBasGaucheB"></div>
	</div>

		<div id="perspectiveDroite">
			<div id="rectangleHautDroitH"></div>
			<div id="rectangleBasDroitH"></div>
			<div id="rectangleHautDroiteB"></div>
			<div id="rectangleBasDroiteB"></div>
		</div>

		<div id="perspectiveMilieu">
			<div id="rectangleHautMilieu"></div>
			<div id="rectangleBasMilieu"></div>
		</div>

	
		<div id="base"></div>
		
		<div id="floor"></div>
		
		<!--<div id="platform1"></div>
			
		<div id="platform5"></div>
		<div id="floor">-->

	<div id="batman" class="dirDroite" style="left:700px;top:280px;"></div>
	<div id="zone" style="left:300px;top:50px;"></div>

	


		<script>
		document.onkeydown = pave;
		function pave(e) {
		    e = e || window.event;
		    if (e.keyCode == '38') {
		        jump();
		    }
		    else if (e.keyCode == '40') {
		        avancerBottom();
		    }
		    else if (e.keyCode == '37') {
		        avancerLeft();
		    }
		    else if (e.keyCode == '39') {
		        avancerRight();
		    }
		}

	</script>
</div>
	
</body>
</html>

Also, i'm trying to implement a jump action, if you have any ideas to make the whole movement instead of just a 'teleportation', i'll appreciate it.

Thanks guys ! Cheers.

Answer 1

Had to do couple of tweaks!

http://codepen.io/smartsendy34/pen/emqdEm

Right movement is smoother now!

// USING JAVASCRIPT

var moveKey = 0;
var moveTime = 0 ;
var frames = 10;
var second = 50;
var fps = second/frames;

function avancerRight()
{
    var batman=document.getElementById("batman");
    x=parseInt(batman.style.left);

    batman.className="dirDroite";

    clearTimeout(moveTime);
        moveTime = setTimeout(function(){
        clearInterval(moveKey);
    },second);        

    clearInterval(moveKey);
    moveKey = setInterval(function(){
        x = x+(10 / frames);
        batman.style.left = x + "px";      
    },fps);

    return false;
}

// USING JQUERY

function avancerRight()
{
    var batman=document.getElementById("batman");
     x=batman.style.left;

    batman.className="dirDroite";
    $(batman).stop().animate({"left":(x+10)},100);

    return false;
}