Как запретить JavaScript применять событие mouseover несколько раз

0

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

Вот живой пример: Здесь Продолжайте быстро перемещать мышь и вынимать изображение, а затем отвести мышь, и вы увидите.

Теги:

3 ответа

2
Лучший ответ

Позвольте мне представить вам CSS3, что делает jQuery устаревшим: Demo

HTML:

<img src="......./Smiley.png" alt="smile" id="imgSmile" />

CSS:

#imgSmile {
    width:200px;
    transition:width 0.4s ease;
}
#imgSmile:hover {
    width:250px;
}

JS: НЕТ!

Поделиться
  • 0
    Выглядит чище, есть ли побочные эффекты при использовании CSS-переходов вместо JavaScript? как совместимость браузера?
  • 0
    "делает JQuery устаревшим" своего рода широкое утверждение.
Показать ещё 1 комментарий
2

Используйте .stop():

$(this).stop().animate({width: "200px"}, 'fast');

http://jsfiddle.net/bR5cm/2/

Поделиться
  • 0
    Таким образом, stop () останавливает находящийся объект в каком-либо его состоянии и применяет к нему анимацию с этой точки?
  • 1
    Из документов: Когда .stop () вызывается для элемента, текущая анимация (если есть) немедленно останавливается.
0

Вы можете добавить класс во время анимации и удалить его после завершения анимации и применить только новую анимацию, если класс не применяется к элементу. Пример:

 $(document).ready(function(){
       $('#imgSmile').width(200);
       $('#imgSmile').mouseover(function()
       {
           if(!$(this).hasClass('animating')){
              $(this).css("cursor","pointer");
              $(this).addClass('animating');
               $(this).animate({width: "250px"}, 'slow',function(){
                    $(this).removeClass('animating');
               });
           }
       });

    $('#imgSmile').mouseout(function()
      {   
          $(this).animate({width: "200px"}, 'slow');
       });
   });

Демо: http://jsfiddle.net/bR5cm/3/

Поделиться
  • 0
    Этот способ не дает хорошего решения, попробуйте навести несколько раз, затем уберите мышь и попробуйте снова навести курсор, анимация не будет воспроизводиться, пока не пройдет некоторое время.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню