Проблема в анимации при событии мыши
 

Приветствую!

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

Вообщем вот http://learn.javascript.ru/play/wQy9tb

При наведении мыши на пункты 1, 2, 3 показываются соответствующие слайды.

Короче анимация коряво работает при быстром наведение на пункты пока еще слайд не доехал.

Должно работать так как здесь http://igrmag.ru - - слады должны быстро менять направление.

Вариант с параметром go который останавливает анимацию почемуто не работает.

Буду признателен Вам за помощь.

Митя,
1. когда анимация активна, нужно запретить вызов обработчика.
2. если анимация в действие а юзер навел курсор на другой номер, записываем в переменную нужный номер (номер - это к примеру).
3. анимация закончилась , проверяем переменную куда записывали или не записывали в пункте 2, если есть что то то переходим к той картинке.

cyber, Спасибо за ответ.

С запретом когда анимация активна все понятно, но мне нужно именно без запрета, чтобы не дожидпясь когда слайд остановится он плавно переходил на следующий. (так как в примере по второй ссылке). Чтобы слайды точно реагировали на курсор.

Митя,
останавливаете старый таймер, и запускаете новый, только нужно учесть что картинка уже смещена.

Митя, и зачем заморачиватся если уже 100% есть готовые решение, потому что вас кого мягко говоря плохой..
вот пример:
это

var spans = document.getElementById('messages-container').getElementsByClassName('choice');

for(var a=0; a<spans.length; a++) {
var span = spans[a];

span.onmouseover = function() {
var el = this;
var iden = parseInt(el.id);
  
go = 1;

current = parseInt(document.getElementById("showcase_container_case").style.marginLeft);
future = - (iden - 1) * 1000;
animate('showcase_container_case', current, future, function(p) {return 1 - Math.pow(1 - p, 2);});

};

нужно сделать так, или повесить к примеру на "messages-container" а не на боди, короче через "всплытие"

document.body.onmouseover = function (e){

 if(!e.target.className != 'choice')
   return;

// тут код который выполнять если навели на choice
}

cyber, с последнем упрощу, спасибо.

"останавливаете старый таймер, и запускаете новый, только нужно учесть что картинка уже смещена." - в этом как раз и проблема.

Я останавливаю функцию таймера при наведении (go = 1), потом получаю текщее положение current = parseInt(document.getElementById("showcase_contain er_case").style.marginLeft) и запускаю функцию, где отключаю параметр (go = 0) чтобы таймер заработал.

Но как видите работает с задержками непонятными, нет плавности.

Митя, там весь код менять нужно))
Поэтому и советовал взять готовое решение.
а ошибка в том что go некогда не будет равен 1 когда будет проверяться

function animate(id, from, to, delta, dur) {
  
go = 0;// тут обнуление
  
var element = document.getElementById(id);
var duration = dur || 1000; 
var start = new Date().getTime(); 


setTimeout(function() {
  
if (go == 1) {// это условие некогда не сработает
return false;
}

var now = (new Date().getTime()) - start; 
var progress = now / duration; 

if (progress >= 1) {
var result = to;
}
else {
var result = (to - from) * delta(progress) + from;
}

element.style.marginLeft = result + "px";

if (progress < 1) {
setTimeout(arguments.callee, 10);
}

}, 10);


}

а в каком тогда месте нужно установить clearTimeout(); ?

Митя, можно обойтись без clearTimeout.
к примеру так

!function action() {


if(/* какое то условие*/)
setTimeout(action, 10);
}());

получается нужно отказаться от setTimeout так как он дает задержку?