0

I am looking for the solution for a navigation menu that I am working. Here is the JSFiddle where you can see the working code.

The fadeIn effect needs to happen only on the nav-item hover, but it is happening while mouseleave from the bottom, left or right side of the menu.

3
  • I would suggest using mouseenter and mouseleave instead of hover. It might simplify your logic.
    – Danny
    Commented Sep 10, 2014 at 18:35
  • @Danny I tried with mouseenter and mouseleave, i got the same result. Commented Sep 10, 2014 at 18:38
  • @Danny No, that would be useless, hover() registers handlers for both mouseenter and mouseleave, so no difference at all.
    – user145400
    Commented Sep 10, 2014 at 18:45

2 Answers 2

2

It looks like what you want is: when you move your mouse from a tab to another tab, you don't want the fade-out and in to happen.

In that case, it's because you're not keeping track of whether or not the menu is open. You should only do the fading if the menu was not open, otherwise simply hide and show with no fade.

Code:

var timer;
var isMenuOpen = false;
$('.nav-item').hover(
    function() {
        $('.subnav--main').hide();
        $('.promoted-content--main').hide();
        clearTimeout(timer);
        if(isMenuOpen){
            $(this).find('ul').show();
        }
        else{
            isMenuOpen = true;
            $(this).find('ul').fadeIn( 'slow' );
        }
    },
    function() {
        timer = setTimeout(function() {
            $('.subnav--main').fadeOut( 'fast' );
            $('.promoted-content--main').fadeOut( 'fast' );
            isMenuOpen = false;
        }, 1000);
    }
);

And jsfiddle: http://jsfiddle.net/qdafe3uw/

0
0

If you're trying to get the menu to stay open and not have it fade out when hovering over different nav-items' the selector should be the nav--main

`var timer;
$('.nav--main').hover(function() {
    $('.subnav--main').hide();
    $('.promoted-content--main').hide();
    clearTimeout(timer);
    $(this).find('ul').fadeIn( 'slow' );
    },
    function() {
      timer = setTimeout(function() {
        $('.subnav--main').fadeOut( 'fast' );
        $('.promoted-content--main').fadeOut( 'fast' );
      }, 1000);
 });`

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.