<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function() {
var left = parseInt(getComputedStyle(x, "").getPropertyValue('left'));
if (left > 0) {
t = setInterval(function() {
--left;
x.style.left = left + "px";
if (left == 0) {
clearInterval(t);
var leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
leftmin = parseInt(getComputedStyle(x, "").getPropertyValue('width'));
tt = setInterval(function() {
--leftXXX;
xxx.style.left = leftXXX + "px";
if (leftXXX == leftmin) clearInterval(tt);
}, 10);
}
}, 10);
}
}
</script>
</body>
</html>