Javascript menu hover action: wont stop cascading

Question

Here is the website I am talking about: http://benjaminpotter.org/clients/c3carlingford/

---

So I am building a menu that has popups appear when you hover over a menu item:

and so I have written a javascript (jQuery) function to animate it:

$(".info").css({"opacity": "0", "margin-top": "10px"}).hide(0);

$("#menu-item-51").mouseenter(function(){

    $(".nav1").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-51").mouseleave(function(){

    $(".nav1").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-11").mouseenter(function(){

    $(".nav2").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-11").mouseleave(function(){

    $(".nav2").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-12").mouseenter(function(){

    $(".nav3").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-12").mouseleave(function(){

    $(".nav3").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-13").mouseenter(function(){

    $(".nav4").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-13").mouseleave(function(){

    $(".nav4").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-14").mouseenter(function(){

    $(".nav5").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-14").mouseleave(function(){

    $(".nav5").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

$("#menu-item-15").mouseenter(function(){

    $(".nav6").stop(0).show(0).delay(300).animate({"opacity": "1", "margin-top": "-3px"}, {"duration": (250)});

});

$("#menu-item-15").mouseleave(function(){

    $(".nav6").stop(0).show(0).delay(0).animate({"opacity": "0", "margin-top": "10px"}, {"duration": (150)});

});

so firstly there is the issue that it is a lot of code... but it works...

So what's the issue?

The issue is this:

when you mouse back and fourth over all the links, it cascades. Cool I know, but the client doesn't like it. Neither do I.

So how do I change it so that it behaves better?

I would love it to work like this:

where their dropdowns don't have the same: mouse over all, cascade thing...

You can check out their site here: http://thecity.org/

Answer 1

Try changing stop(0) to stop(true, true) at all the places in your code. It should work as expected.

Passing true as both the arguments to stop method makes sure it clears the queue of previous animations and also forcefully completes them quickly if they are still animating.

stop(clearQueue, jumpToEnd) - Stops the currently-running animation on the matched elements.

Answer 2

On your mouseleave event I would use the .hide() method from jQuery. I'm just assuming that you would like to hide the elements after leaving the menuitem?

I made a quick fiddle to illustrate the problem. Click here for results

Good luck!