но ЭтоНЕ ТО - я умею делать движение блоков мне надо что бы блок номер 2 двигался внутри блока 1, размер блока 1 меньше в 2 раза чем у номера 2 таким образом будет показана сначала левая часть потом правая!!
тут прикол в функции animate вы ее можете настроить как хотите
<!DOCTYPE HTML>
<html>
<head>
<style>
.example {
width:50px;
height:50px;
border:1px solid black;
position:absolute;
left:-25px;
}
.container{
width:50px;
height:50px;
border:1px solid red;
position:absolute;
}
</style>
</head>
<body>
<div id='container' class='container'>
<div id='example' class='example'> </div>
</div>
<a href='#' id='button' style="margin:150px;">show<a/>
<script>
var bt = document.getElementById('button');
bt.onclick = animate;
function animate () {
var element = document.getElementById("example");
var from = -25; // Начальная координата X
var to = 25; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (to - from) * delta(progress) + from;
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
function delta(progress) {
return progress;
}
return false;
}
</script>
</body>
</html>