Search code examples
jquerydrop-down-menumenubarcascadingdropdown

Javascript menu hover action: wont stop cascading

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:

enter image description here

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:

enter image description here

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:

enter image description here

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

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

Solution

  • 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.