CODEWITHSUNDEEP
jqueryhidedelayshowaddclass
AnthW
AnthW

Reputation: 543

remove a a class and then hide it with jquery

the following code i have does not seem to work.

$("ul li a").live("click", function() {
        $(".myMegaMenuDiv").addClass('hideit').delay(300).removeClass('hideit');
 });

I have a mega menu, so when you hover over a menu item it shows a div ".myMegaMenuDiv". But when I click a link in that div, i want it do disapear, as it currently does not. I was hoping the above code would resolve this.

"hideit" adds a value of "display:none"

It works when I just have "addClass", but when I add "delay" and "removeClass" it stops working.

EDIT: Also... after I hide the ".myMegaMenuDiv" the menu does not show when I hover over a nav menu item, so it kind of needs to remove the class too

Upvotes: 1

Views: 1268

Answers (3)

DarkAjax
DarkAjax

Reputation: 16223

The .hide() and .show() methods can receive a number to determine their duration, therefore you could try this instead:

$(".myMegaMenuDiv").hide(300).show(0);

If you want no animation, you could do it like this as well:

$('.myMegaMenuDiv').hide(0).delay(300).show(0)

Upvotes: 5

BNL
BNL

Reputation: 7133

delay isn't just a simple pause timer. it only applies to items in the animation queue. You need to use setTimeout

http://api.jquery.com/delay/

Upvotes: 3

colestrode
colestrode

Reputation: 10658

If you just want to hide the div on click, you can just use the hide function. Also, the live function is deprecated, so it's best to use on.

$("ul li a").on("click", function() {
    $(".myMegaMenuDiv").hide();
});

If you want to hide and show, you can use a setTimeout:

$("ul li a").on("click", function() {
    $(".myMegaMenuDiv").hide();
    setTimeout(function() {
        $(".myMegaMenuDiv").show();
    }, 300);
});

Upvotes: 7

Related Questions