CODEWITHSUNDEEP
javascriptjquerydelaytoggleclass
Paul
Paul

Reputation: 1614

jQuery delay between each toggleclass

I have made a (rather complicated) solution where I have 4 menu items pop in/out from the side and I make that happen by toggling a class.

$('.menuitem').toggleClass('show');

It works great but the client now wants it to "slide out". I figured that I can make him happy if I can create a delay between each toggle, but I cant find a good way to do it. In practice I want each menu item to toggleClass but with a delay of maybe 250ms before next toggleClass.

Edited - Apparently the delay function wont work with toggle, only with animations.

Upvotes: 0

Views: 4967

Answers (3)

user688074
user688074

Reputation:

I would do the $('.menuitem').toggleClass('show') in a separate event.

For instance <button onmousedown="$('.menuitem').toggleClass('show');" onclick="myfunc();">Fast Toggle</button>

If you toggle onmousedown the page will render with the toggle before the click event fires.

Upvotes: 0

Manwal
Manwal

Reputation: 23816

Consider this following code:

$('.menuitem').each(function(i) { 
    var elm=$(this);
    setTimeout(function() { 
        elm.toggleClass('show');
    }, i * 250); 
});

See it in action, in this demo i have hiding diving one by one and delay is 1000 ms.

Upvotes: 4

Jan
Jan

Reputation: 43169

What about:

$('.menuitem').toggleClass('show').delay(1000).toggleClass('hide');

See jQuery's delay() function for further reference.

Upvotes: 0

Related Questions