CODEWITHSUNDEEP
jquery
Kamal
Kamal

Reputation: 2180

Drop Down Menu Using jQuery slideDown

Hi Friends I am working on simple drop down menu using jQuery When I mouse enter on the menu then the sub-manues will appear with use of slideDown(2000) and when I mouse out then same will slideUp(2000). Now the problem is if user mouse enter the main menu and suddenly mouse out then as per my code the slide effect open entire and then close. I just want when user mouse out from menu the sub menu will slideUp no need to full open ... For your reffrence i have mentioned my code below

Script 

$(document).ready(function(e) {
/*Navigation Code*/
$('#mainNav nav ul li').mouseenter(function(){

    $(this).children('ul').slideDown(200);
    })
$('#mainNav nav ul li').mouseleave(function(){

    $(this).children('ul').slideUp(200);
    })
$('#mainNav nav ul li > ul li ul').parent('li').children('a').css({background: 'url(images/navArrow.png) 184px 18px no-repeat'});

/*Navigation Code Ends*/
});

I think stop() will help but when I use it my code stops working

Please help me guys.. Thanks in advance :)

Upvotes: 0

Views: 2111

Answers (2)

amosmos
amosmos

Reputation: 1049

I tried to add .stop() and it seemed to work for me: http://jsfiddle.net/EjnHQ/

Like this:

$('#mainNav nav ul li').mouseenter(function(){
    $(this).children('ul').stop().slideDown(200);
});

$('#mainNav nav ul li').mouseleave(function(){
    $(this).children('ul').stop().slideUp(50);
});

I would suggest making the slideUp pace faster than the slideDown.

If for some reason it still doesn't work for you try to add .stop(true) or .stop(true, true), something like this:

$('#mainNav nav ul li').mouseenter(function(){
    $(this).children('ul').stop(true, true).slideDown(200);
});

$('#mainNav nav ul li').mouseleave(function(){
    $(this).children('ul').stop(true, true).slideUp(200);
});

The True parameters are used to also clear all queued animations.

Also don't forget ; at the end of the commands.

Upvotes: 2

Arul
Arul

Reputation: 491

don't use slideup when mouse out. just hide(); its working fine. example.

**on mouse over:**
--------------------------------------
$("#btnmenu").hover(function(){
   $("#menu").slideDown();
}); 


**on mouse out** 
--------------------------------------
$("#btnmenu").mouseout(function(){
    $("#menu").hide();
});

Upvotes: 0

Related Questions