donkey,
если еще актуально, посмотрите такой вариант:
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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 id="screen" 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");
var screen = document.getElementById("screen");
a.onclick = function () {
var leftX = parseInt(getComputedStyle(x, "").getPropertyValue('left')),
widthX = parseInt(getComputedStyle(x, "").getPropertyValue('width')),
leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
widthXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('width'));
if (isNaN(leftX)){
leftX = parseInt(getComputedStyle(screen, "").getPropertyValue('width'))-
parseInt(getComputedStyle(x, "").getPropertyValue('right'))-widthX;
}
if (isNaN(leftXXX)){
leftXXX = parseInt(getComputedStyle(screen, "").getPropertyValue('width'))-
parseInt(getComputedStyle(xxx, "").getPropertyValue('right'))-widthXXX;
}
$("#x").css("left", leftX).animate({left: "0px"}, 1500);
$("#xxx").css("left", leftXXX).animate({left: widthX+"px"}, 1500);
}
</script>
</body>
</html>