Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.10.2013, 20:28
Интересующийся
Отправить личное сообщение для Митя Посмотреть профиль Найти все сообщения от Митя
 
Регистрация: 10.05.2013
Сообщений: 16

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

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

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

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

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

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

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

Буду признателен Вам за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2013, 00:52
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Митя,
1. когда анимация активна, нужно запретить вызов обработчика.
2. если анимация в действие а юзер навел курсор на другой номер, записываем в переменную нужный номер (номер - это к примеру).
3. анимация закончилась , проверяем переменную куда записывали или не записывали в пункте 2, если есть что то то переходим к той картинке.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 20.10.2013, 01:42
Интересующийся
Отправить личное сообщение для Митя Посмотреть профиль Найти все сообщения от Митя
 
Регистрация: 10.05.2013
Сообщений: 16

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

С запретом когда анимация активна все понятно, но мне нужно именно без запрета, чтобы не дожидпясь когда слайд остановится он плавно переходил на следующий. (так как в примере по второй ссылке). Чтобы слайды точно реагировали на курсор.
Ответить с цитированием
  #4 (permalink)  
Старый 20.10.2013, 01:56
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Митя,
останавливаете старый таймер, и запускаете новый, только нужно учесть что картинка уже смещена.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 20.10.2013, 02:09
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 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
}
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #6 (permalink)  
Старый 20.10.2013, 11:05
Интересующийся
Отправить личное сообщение для Митя Посмотреть профиль Найти все сообщения от Митя
 
Регистрация: 10.05.2013
Сообщений: 16

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

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

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

Но как видите работает с задержками непонятными, нет плавности.
Ответить с цитированием
  #7 (permalink)  
Старый 20.10.2013, 13:02
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 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);


}
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #8 (permalink)  
Старый 20.10.2013, 17:32
Интересующийся
Отправить личное сообщение для Митя Посмотреть профиль Найти все сообщения от Митя
 
Регистрация: 10.05.2013
Сообщений: 16

а в каком тогда месте нужно установить clearTimeout(); ?
Ответить с цитированием
  #9 (permalink)  
Старый 20.10.2013, 17:42
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Митя, можно обойтись без clearTimeout.
к примеру так
!function action() {


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


Сообщение от cyber
там весь код менять нужно))
Поэтому и советовал взять готовое решение.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #10 (permalink)  
Старый 20.10.2013, 18:56
Интересующийся
Отправить личное сообщение для Митя Посмотреть профиль Найти все сообщения от Митя
 
Регистрация: 10.05.2013
Сообщений: 16

получается нужно отказаться от setTimeout так как он дает задержку?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета заливки у SVG картинки при наведении мыши? akkond Общие вопросы Javascript 2 15.04.2014 13:04
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 16:15
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43