I have this jquery code below, but the problem is that if I scroll over and out of the trigger element quickly and through the menu, then it breaks, progressively showing less elements each time until nothing is shown. Can I add a timer or easing to stop this breaking?
<ul class="buying-dropdown">
<li><p class="green-button"><a href="#">Read the blog</a></p>
<ul>
<li class="first amazon"><a href="#">paperback</a></li>
<li class="signed"><a href="#">Signed edition</a></li>
<li class="kindle"><a href="#">kindle edition</a></li>
<li class="hardback"><a href="#">hardback edition</a></li>
<li class="last postcard"><a href="#">postcard edition</a></li>
</ul> </li>
(function ($) {
Drupal.behaviors.weaveoftheride = {
attach: function(context, settings) {
console.log('called');
$('.buying-dropdown li').hover(
function () {
//show its submenu
$('ul', this).stop().slideDown(100);
},
function () {
//hide its submenu
$('ul', this).stop().slideUp(100);
}
);
}
};
})(jQuery);