javascript — запуск функции jQuery более одного раза
У меня есть следующая структура для меню на моем сайте
<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");
});
Но парящий фрикон вызывается только один раз. Как заставить его работать все время не раз?
Решение
Я полагаю, что проблема в том, что вы никогда не удаляете класс «анимированного встряхивания» из элемента списка. Я предполагаю, что у вашего анимированного класса встряхивания есть одноразовая анимация, которая потрясает его. Поэтому, как только вы добавили класс к своему элементу, он никогда не сможет добавить его снова, поскольку он уже есть. Чтобы решить эту проблему, вам нужно будет удалить его в какое-то время, наиболее вероятно, когда ваша мышь перестает зависать над ним.
Вместо использования hover () попробуйте использовать on () с событиями 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");
});
Выполнение этого последним способом оставило бы ваш предмет с классом встряхивания почти навсегда после того, как он был наведен один раз, что может быть не лучшим способом.
Другие решения
Других решений пока нет …