Как остановить оживленную анимацию JQuery?

В веб-приложение, я работаю, я хочу, чтобы создать некоторые слайдерdiv S, который будет двигаться вверх и вниз с Mouseover & отведении указателя мыши (соответственно). Я в настоящее время она реализуется с hover() функции JQuery, в с помощью animate() и сокращения/Increment is top Значение css по мере необходимости. На самом деле это работает довольно хорошо.Как остановить оживленную анимацию JQuery?

Проблема в том, что она имеет тенденцию застревать. Если вы переместите указатель мыши над ним (особенно возле нижней части) и быстро удалите его, он будет непрерывно перемещаться вверх & и не останавливаться, пока не завершится 3-5 циклов. Для меня кажется, что проблема может быть связана с одной анимацией, начинающейся до того, как другая будет выполнена (например, обе пытаются запустить, поэтому они перемещаются назад и вперед.)

Хорошо, теперь для кода. Вот основной JQuery, что я использую:

$('.slider').hover(
    /* mouseover */ 
    function(){ 
     $(this).animate({ 
      top : '-=120' 
     }, 300); 
    }, 
    /* mouseout*/ 
    function(){ 
     $(this).animate({ 
      top : '+=120' 
     }, 300); 
    } 
);

Я также воссоздали поведение в JSFiddle.

Любые идеи о том, что происходит? :)

== EDIT == ОБНОВЛЕНО JSFiddle

источник

2012-06-04 Miguel

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

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

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

Она не идеальна, но добавление .stop(true,true) предотвратит большинство того, что вы видите ,

http://jsfiddle.net/W5EsJ/18/

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

Вы можете уменьшить мерцание за счет уменьшения задержки, однако он все равно будет присутствовать, пока задержка не 0 (без анимации)

Update

Я думал об этом и понял, что есть очевидное решение этого. Hoverintent-подобная функциональность!

http://jsfiddle.net/W5EsJ/20/

$(document).ready(function() { 
    var timer; 
    $('.slider').hover(
     /* mouseover */ 
     function(){ 
      var self = this; 
      timer = setTimeout(function(){ 
       $(self).stop(true,true).animate({ 
        top : '-=120' 
       }, 300).addClass('visible'); 
      },150) 
     }, 
     /* mouseout*/ 
     function(){ 
      clearTimeout(timer); 
      $(this).filter(".visible").stop(true,true).animate({ 
       top : '+=120' 
      }, 300).removeClass("visible"); 
     } 
    ); 
});

источник

2012-06-04 15:43:51

Удивительный! Мне просто жаль, что я не смог бы это сделать еще немного. В любом случае, спасибо! :) – Miguel

Не удалось воспроизвести проблему, но я считаю, что hover становится вызывается несколько раз. Чтобы обойти это, вы можете проверить, находится ли div в анимации. Если да, то не запускайте еще одну анимацию.

Добавить следующий фрагмент кода, чтобы проверить, если DIV уже 'оживляющий':

if ($(this).is(':animated')) { 
    return; 
}

Код: http://jsfiddle.net/W5EsJ/2/
Ссылка: HTTP: //api.jquery.com/animated-selector/

источник

2012-06-04 14:49:37

Кажется, что в вашей игре нет анимации –

Вы можете использовать .stop(), а также использовать внешнюю позицию контейнера

$(document).ready(function() { 
    $('.slider').hover(
     /* mouseover */ 
     function(){ 
      $(this).stop().animate({ 
        top : $('.outer').position().top 
      }, 300); 
     }, 
     /* mouseout*/ 
     function(){ 
      $(this).stop().animate({ 
       top : $('.outer').position().top + 120 
      }, 300); 
     } 
    ); 
});

DEMO

Надеется, что это помогает

источник

2012-06-04 14:56:24 Dhiraj

В вашей демонстрационной версии, похоже, исправлена проблема с отказом, но она имеет тенденцию скользить из поля зрения ...: P – Miguel

обновил демо. заметил, что положение ползунка относительно, поэтому используется положение внешнего контейнера, может помочь в текущей ситуации – Dhiraj

Я понимаю проблему и воспроизвести его, это происходит при наведении курсора мышей снизу вверх. Наведение с помощью мыши - вот что вызывает проблему, так как функция анимации будет вызываться, когда мышь нависает над изображением. Вам нужно контролировать, что здесь происходит, используя мышь и мышь, посмотрите аналогичный пример: Jquery Animate on Hover

источник

2012-06-04 15:01:29 AGE

Причина, по которой это происходит, потому что наведение на очереди заставляет зависнуть, заставляя его скользить вверх и вниз несколько раз. Там есть плагин с именем hoverIntent, который исправляет проблему. http://cherne.net/brian/resources/jquery.hoverIntent.html

Если вы решили использовать hoverIntent, единственное, что вы должны изменить в коде .hover> .hoverIntent

источник

2012-06-04 15:06:14

Как остановить оживленную анимацию JQuery?

ответ

Смежные вопросы