CODEWITHSUNDEEP
jquery
Jagdish Prabhu
Jagdish Prabhu

Reputation: 1

jquery slideUp() and slideDown() issue

I am quite new to jquery and having b/m problem with slidedown and slideup event.

I have horizontal navigation bar with 5 buttons (given as list items e.g sports,brand etc) which themselves are wrapped in div with id shoppingNav.

I have a slidedown menu which has CSS display:none (div with id submenu_bg).

I want submenu_bg to slidedown when I mouseover #shoppingNav and stay visible till I mouseout from #shoppingNav. I want individual buttons to fadeIn different icons on hover but submenu_bg should remain visible till I mouseout from whole on navigation bar( #shoppingNav).

What currently happening is submenu_bg keep on sliding down and up when hover from one button to another.

You can check the effect I want to get on nike.com. I am not able to figure out how to do this. Any help on this will be highly appreciated.

Jquery code :

$(function(){
$('#shoppingNav').on('mouseover',function(){
    $('#submenu_bg').slideDown(200);
    });

$('#shoppingNav').on('mouseout',function(){
    $('#submenu_bg').stop().slideUp(200);
    });
});

<div id="shoppingNav">
        <ul>
        <li id="sports"><a href="#"></a></li>   
            <li id="brand"><a href="#"></a></li>                        
            <li id="clothing"><a href="#"></a> </li>                        
            <li id="footwear"><a href="#"></a></li>                         
            <li id="hotdeals"><a href="#"></a></li>
        </ul>
        <div id="submenu_bg"><img src="_images/submenu_bg1.png" alt="some background"/></div> 

</div>

Upvotes: 0

Views: 758

Answers (2)

adeneo
adeneo

Reputation: 318192

Use a timeout, and then clear that timeout when mousing over a new list element so as to not slide the submenu again:

$(function(){
    var timer;
    $('#shoppingNav').on({
        mouseenter: function(){
            clearTimeout(timer);
            if (!$('#submenu_bg').is(':visible'))
                $('#submenu_bg').slideDown(200);
        },
        mouseleave: function(){
            timer = setTimeout(function() {
                $('#submenu_bg').slideUp(200);
            }, 500);
        }
    });
});​

FIDDLE

Upvotes: 1

Undefined
Undefined

Reputation: 11431

It seems to be something to do with the way you are wrapping the event handlers.

I played around with this and managed to get it working here.

$('#shoppingNav').on('mouseover',function(){
  $('#submenu_bg').slideDown(200);
});

$('#shoppingNav').on('mouseout',function(){
  $('#submenu_bg').stop().slideUp(200);
});

​

Upvotes: 0

Related Questions