РАБОЧИЙ ПРИМЕР ANIMATE
( Если песочница не работает, скопируйте код в html файл, и запустите.)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#block {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
.step {
position:absolute;
}
</style>
</head>
<div id="block"> </div>
<script>
$(document).ready(function(){
$("#block").animate({
// переместим в координату 500 по x
"left": "500px"
},{
// функция степ вызывается на каждом шагу
// теперь мы можем делать свою "неповторимую" анимацию :)
step: function(now, fx) {
// собственно само передвижение квадрата по Y
// вместо now можно и свою переменную использовать
$(fx.elem).offset({top: Math.sin(now/80)*200+200});
// дальше мы немного повыпендриваемся :)
//добавим какойнибудь обьект на страницу, который будет символизировать след
$("body").append("<div class='step'>"+now.toFixed(0)+"</div>");
// отпозиционируем наш след туда же где и квадрат
$(".step:last").offset({top: Math.sin(fx.now/80)*200+200,left:now });
//console.log(fx); если захотим посмотреть что у на в fx
}
},"slow");
});
</script>
</body>
</html>