19.10.2013, 20:28
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 16
|
|
Проблема в анимации при событии мыши
Приветствую!
Нужна помощь, не могу разобраться как исправить притормаживания в анимации слайда по событию наведении мыши на пункты.
Вообщем вот http://learn.javascript.ru/play/wQy9tb
При наведении мыши на пункты 1, 2, 3 показываются соответствующие слайды.
Короче анимация коряво работает при быстром наведение на пункты пока еще слайд не доехал.
Должно работать так как здесь http://igrmag.ru - - слады должны быстро менять направление.
Вариант с параметром go который останавливает анимацию почемуто не работает.
Буду признателен Вам за помощь.
|
|
20.10.2013, 00:52
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Митя,
1. когда анимация активна, нужно запретить вызов обработчика.
2. если анимация в действие а юзер навел курсор на другой номер, записываем в переменную нужный номер (номер - это к примеру).
3. анимация закончилась , проверяем переменную куда записывали или не записывали в пункте 2, если есть что то то переходим к той картинке.
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
20.10.2013, 01:42
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 16
|
|
cyber, Спасибо за ответ.
С запретом когда анимация активна все понятно, но мне нужно именно без запрета, чтобы не дожидпясь когда слайд остановится он плавно переходил на следующий. (так как в примере по второй ссылке). Чтобы слайды точно реагировали на курсор.
|
|
20.10.2013, 01:56
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Митя,
останавливаете старый таймер, и запускаете новый, только нужно учесть что картинка уже смещена.
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
20.10.2013, 02:09
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Митя, и зачем заморачиватся если уже 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
}
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
20.10.2013, 11:05
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 16
|
|
cyber, с последнем упрощу, спасибо.
"останавливаете старый таймер, и запускаете новый, только нужно учесть что картинка уже смещена." - в этом как раз и проблема.
Я останавливаю функцию таймера при наведении (go = 1), потом получаю текщее положение current = parseInt(document.getElementById("showcase_contain er_case").style.marginLeft) и запускаю функцию, где отключаю параметр (go = 0) чтобы таймер заработал.
Но как видите работает с задержками непонятными, нет плавности.
|
|
20.10.2013, 13:02
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Митя, там весь код менять нужно))
Поэтому и советовал взять готовое решение.
а ошибка в том что 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);
}
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
20.10.2013, 17:32
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 16
|
|
а в каком тогда месте нужно установить clearTimeout(); ?
|
|
20.10.2013, 17:42
|
|
I am Student
|
|
Регистрация: 17.12.2011
Сообщений: 4,415
|
|
Митя, можно обойтись без clearTimeout.
к примеру так
!function action() {
if(/* какое то условие*/)
setTimeout(action, 10);
}());
Сообщение от cyber
|
там весь код менять нужно))
Поэтому и советовал взять готовое решение.
|
__________________
Цитата:
|
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
|
|
|
20.10.2013, 18:56
|
Интересующийся
|
|
Регистрация: 10.05.2013
Сообщений: 16
|
|
получается нужно отказаться от setTimeout так как он дает задержку?
|
|
|
|