Хочу реализовать следующую задачу: объект при наведении на него курсора начинает двигаться по линейной траектории. Как только курсор покидает поле объекта он должен начать двигаться в обртаном направлении и встать в исходную позицию.
В качестве объекта использую <div id="pict"> абсолютно позиционированный, с картинкой в background. При наступлении события onmouseover выполняется функция slide(), при onmouseout выполняется функция slideback().
function slide(){
for (var i=100; i<200;i++)
{
pict.style.left=i+"px";
}
}
Вот в этом месте возникает первая неприятность, цикл обрабатывается слишком быстро. Пробовал притормозить его при помощи setInterval, но успеха добиться не смог. Есть какие-то альтернативные функции которые сделают задержку в каждой итерации??
И вопрос номер 2: Полагаю что когда добьюсь плавного скольжения функция slide будет выполняться до конца, даже если курсор покинет картинку раньше. Соответственно имеет смысл в каждой итерации проверять находится курсор над нашим объектом и если он покинул пределы объекта прекратить выполнение функции slide, вернуть текущее значение переменной i и передать его в функцию slideback(). Меня интересует есть ли какое-то свойство у объектов пор которому можно определить в фокусе он или нет?
Пока что предполагаю отслеживать координаты курсора, вычислять положение объекта и таким образом определять положение курсора относительно объекта, но это слишком громоздко, хотелось бы более элегантного решения.