How do I add a delay timer?

Question

I have this code that makes menu items slide down and up. I want to add a timer so there is a delay in the slide down then back up.

$(function () {
    $("#menu").find("li").each(function () {
        if ($(this).find("ul").length > 0) {
            $(this).mouseenter(function () {
                $(this).find("ul").stop(true, true).slideDown();
            });
            $(this).mouseleave(function () {
                $(this).find("ul").stop(true, true).slideUp();
            });
        }
    });
});

What does this have to do with Java? What programming language is this? — Hovercraft Full Of Eels
– Hovercraft Full Of Eels, Commented Jul 8, 2012 at 19:31
I think you can use the following instead of each to add event listeners $("#menu ul li ul:not(:empty)").mouseenter(function(){...}) .mouseleave(function(){...}); — The Alpha
– The Alpha, Commented Jul 8, 2012 at 19:49

Esailija · Accepted Answer · 2012-07-08 19:36:34Z

4

It appears like you're writing javascript with jQuery

jQuery has a built in .delay function for animation queues.

In your example, delaying the slidedown animation by 300 ms would look like

$(this).find("ul").stop(true, true).delay(300).slideDown();

See jQuery's delay

edited Jul 8, 2012 at 19:36

Esailija

140k24 gold badges280 silver badges328 bronze badges

answered Jul 8, 2012 at 19:32

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

A smart approach would be to add a hover intent to wait before triggering mouseleave:

jsBin demo

$("#menu").find("li:has(ul)").on('mouseenter mouseleave',function( e ){
     var $UL = $(this).find('ul');
     if(e.type==='mouseenter'){
          clearTimeout( $(this).data('wait') );
          $UL.stop(1,1).slideDown();
     }else{            
          $(this).data('wait', setTimeout(function(){
              $UL.stop().slideUp();
          },180) );     
     } 
});

instead of using if ($(this).find("ul").length > 0) { just use: ("li:has(ul)")
to trigger your events only on li elements that has ul as children.
add an event callback e for the mouseenter mouseleave.
if the e event == mouseenter ..... else is mouseleave.
Than clear the data attribute called 'wait' and slideDown the children ul
Now, leaving the original li element to reach the 'distant' ul we have to cross over a white space (demo) that will usually trigger immediately the 'slideUp()', but we set a timeout counter inside that li's data attribute that will wait ~180ms before running.
Reaching the 'distant' ul element - beeing a children of the timeouted 'li' we clear the timeout (step 1) 'retaining' the mouseenter state.

use ~180ms or how much you think is needed to reach with the mouse the 'distant' UL element

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 8, 2012 at 19:51

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

Roko C. Buljan Over a year ago

@user1510450 You're welcome! Hope I guessed well your needs. (Welcome to SO; make sure to read the FAQ and this: How to accept an answer )

Collectives™ on Stack Overflow

How do I add a delay timer?

2 Answers 2

Comments

jsBin demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related