Как сделать эффект волны, при щелчке, у выпадающего меню?

Question

[Алексей Смирнов]

Здравствуйте.

Сделано вот такое выпадающее меню с эффектом волны при щелчке (красного цвета для наглядности):
https://jsfiddle.net/e42f5yL3/4/

Работает все как надо. За исключением того, что при щелчке на ссылку сначала происходит убирание выпадающего меню, а только потом срабатывает эффект волны красного цвета.

Как сделать так, чтобы после щелчка возникал эффект волны, а выпадающее меню при этом оставалось на месте (не убиралось)?

P.S. То есть нужно, чтобы волна отображалась бы на нажатой ссылке. Как бы показывая пользователю, что щелчок сработал.

Answer 1

[lightalex]

Проблема в том что вы добавляете span в body, а не li
Также span появляется строго под курсором
Следовательно у li теряется hover и менюшка закрывается
Есть два пути решения:
1) Добавлять span не в body, а в li
2) Устанавливать таймер который будет искуственно удерживать hover для li

Comments

[Алексей Смирнов]

Я попробовал первый способ, он работает в JSFiddle, но не срабатывает у меня в коде.
А как реализовать 2-й описанный вами способ?

[lightalex]

$('#menu ul li').mouseover();
setTimeout(function(){
$('#menu ul li').mouseout();
}, 1000);