Плавающее изображение

[human]

есть такой вот скриптик

<script>
window.onload = function(){
init();

}

function init(){
var image = document.createElement("div")
	with(image.style){
		position = "absolute";
		left = "10px";
		top = "30px";
		width = "100px";
		height = "100px";
		border = "1px solid red"
		backgroundImage = "url(image_0.jpg)";
	}
	image.id = 'image';
	document.body.appendChild(image);
var text = document.createElement("div");
with(text.style){
		position = "absolute";
		left = "300px";
		top = "200px";
		width = "100px";
		height = "30px";
		border = "1px solid red"
	}	text.id='info';document.body.appendChild(text);
}
function go(){
var image = document.getElementById('image');
 scrollInterval = setInterval('xxx()', 2);
return false;

}
function xxx(){
var image = document.getElementById('image');
var left = parseInt(image.style.left);
document.getElementById('info').innerHTML = left;
if (left<500){
	image.style.left =left+4 + "px";
}
else{ clearInterval(scrollInterval);
image.style.left = "10px";

}
}

При нажатии на ссылку блок начинает движение!!!
Возможно ли сделать как ниубдь чтобы это было более гладко, а то во время движения появляются гллюки и небольшие искажения =(((
Заранее спасибо!!!

[AzriMan]

в скрипт не вчитывался, но при беглом прочтении: я бы выставил поменьше интервал и шаг.

[human]

ну и в результате вы получим очень медленный сдвиг =\
А нам нужно, чтоб расстояние от начало левого края до 600 px от левого края проходило где то за секунду.
вот как то ведь это реализовано в Image Flow

[ZoNT]

ну так делай неравномерный сдвиг! Ты делаешь равномерный (по 4 пикселя прибавляешь), а надо делать неравномерный...

[human]

всмысле =\ как раз и надо чтобы равномерно он ехал =\

[ZoNT]

вот как то ведь это реализовано в Image Flow

тут неравномерное движение... Сначала приращение смещения маленькое, потом больше-больше, в середине движения - максимальное, потом уменьшается..

[human]

ну эт я так к примеру привел =\
Задача состоит в равномерном движении!!

[AzriMan]

ну и в результате вы получим очень медленный сдвиг =\

да ну? о чем вы говорите?!
если объект за секунду перемещается на 10 пикселей, то можно сделать таймер в пол секунды и двигать по 5 пикселей - в результате шаг будет меньше и "дерганье" будет заметно меньше. если двигать с таймером в пол секунды по 5 пикселей то за секунду объект в любом случае переместится на 10 пикселей, совершив два хода.

хотя.. если учесть погрешности, искажения времени, пространства и прочее.. то вполне может получиться так, что результате мы будем иметь ну ооочень медленный сдвиг.

[Андрей Параничев]

Если вы внутри функции-аниматора будете изменять innerHTML объекта и получать его каждый раз через getElementById, то не мудрено, что у вас будет прерывистая и глючная анимация.

[human]

да ну? о чем вы говорите?!
если объект за секунду перемещается на 10 пикселей, то можно сделать таймер в пол секунды и двигать по 5 пикселей - в результате шаг будет меньше и "дерганье" будет заметно меньше. если двигать с таймером в пол секунды по 5 пикселей то за секунду объект в любом случае переместится на 10 пикселей, совершив два хода.

хотя.. если учесть погрешности, искажения времени, пространства и прочее.. то вполне может получиться так, что результате мы будем иметь ну ооочень медленный сдвиг.

хм......вы меня опять не правильно поняли....
на сколько мне известно минимальную временную задержку которую мы можем использовать это 1 милисекунда...
ну допустим сделали мы так как вы предлогаете:
setInterval('xxx()', 1); // задержка в 1 милисекунду
и функции сдвига прирост делаем в 1 пиксель
в результате чего получаем очень медленную анимацию потому как за 1 мелисикунду проходит 1px
Начинаем увеличивать скорость путем увеличивания сдвига, ставим 2px и вот появились уже глюки на изображении при перемещении.

Хочу обратить ваше внимание на то, что если убрать изображение и просто двигать блок с какой то высотой и шириной + бордер
все будет работать нормально!!! Тоесть дергается только изображение, и мне не понятно почему =(((