функция вспылить JQuery несколько раз

Question

я иметь следующую структуру для меню на моем сайте

<div class="header"> 
     <ul> 
      <li id="menu__lnk_one"><a href="#">Home</a></li> 
      <li><a href="#">Our Story</a></li> 
      <li><a href="#">Tools</a></li> 
      <li><a href="#">Technology</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Careers</a></li> 
     </ul> 
    </div> 

и я связала JQuery и написал следующий код, чтобы добавить класс menu__link_one предмета

$("#menu__lnk_one").hover(function(){ 
      $(this).addClass("animated shake"); 
     }); 

Но функция зависания называется только один раз. Как заставить его работать все время более одного раза?

Answer 1

Я считаю, что проблема заключается в том, что вы никогда не удаляете класс «анимированный дрожь» из своего списка. Я исхожу из предположения, что ваш анимированный класс shake имеет однократную анимацию, которая встряхивает ее. Поэтому, как только вы добавили класс в свой элемент, он никогда не сможет добавить его снова, поскольку он уже имеет его. Чтобы решить эту проблему, вам нужно будет удалить ее в какое-то время, скорее всего, всякий раз, когда ваша мышь перестанет зависать над ней.

Вместо использования парения(), попробуйте использовать на() с «MouseEnter» и «MouseLeave» событиями:

$("#menu__lnk_one").on('mouseenter', function() { 
    $(this).addClass("animated shake"); 
}); 

$("#menu__lnk_one").on('mouseleave', function() { 
    $(this).removeClass("animated shake"); 
}); 

В качестве альтернативы, вы можете попробовать быстро извлекать право класса, прежде чем добавить его снова, хотя Я не на 100%, это сработает, вам может потребоваться задержка между двумя.

$("#menu__lnk_one").hover(function() { 
    $(this).removeClass("animated shake").addClass("animated shake"); 
}); 

Действовать последний путь будет оставить свой предмет с классом трясти почти постоянно после того, как он был когда-то парил над, который не может быть лучшим способом.