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

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

<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";

}
}

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

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

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

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

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

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

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

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

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

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

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

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

human,
прочитайте пост выше еще раз и внимательно.

сделал как вы предложили :

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

	}
scrollInterval = setInterval(xxx,1);
}

И все тоже самое, еще раз подчеркну если убрать изображение все ок.
начинает дергать только ОНО!!! =((