Retarder slideDown()/slideUp() - jquery dropdown

Question

Je crée un drop down que je veux retarder d'environ 250 ms afin qu'il ne soit pas déclenché lorsque quelqu'un fait rapidement défiler le bouton.

Voici mon code actuel. J'ai essayé d'utiliser la méthode delay() mais ça ne va pas bien.

$(".deltaDrop").hover(function(){ 
    $('.deltaDrop ul').stop(false,true).slideDown(250); 
    $('.delta').css('background-position','-61px -70px'); 
},function(){ 
    $('.deltaDrop ul').stop(false,true).slideUp(450); 
    $('.delta').css('background-position','-61px 0'); 
}); 

Merci

Answer 1

var timer; 
timer =  setTimeout(function() { 
        -- Your code goes here! 
       }, 250); 

Ensuite, vous pouvez utiliser la fonction clearTimeout() comme celui-ci.

clearTimeout(timer); 

Answer 2

setTimeout(function() { 
    $('.deltaDrop ul').slideDown() 
    }, 5000); 

Answer 3

Untested, unrefactored:

$(".deltaDrop") 
    .hover(
    function() 
    { 
     var timeout = $(this).data('deltadrop-timeout'); 

     if(!timeout) 
     { 
     timeout = 
      setTimeout(
      function() 
      { 
       $('.deltaDrop ul').stop(false,true).slideDown(250); 
       $('.delta').css('background-position','-61px -70px'); 
       $('.deltaDrop').data('deltadrop-timeout', false); 
      }, 
      250 
     ); 
     $(this).data('deltadrop-timeout', timeout); 
     } 
    }, 
    function() 
    { 
     var timeout = $(this).data('deltadrop-timeout'); 
     if(!!timeout) 
     { 
     clearTimeout(timeout); 
     $('.deltaDrop').data('deltadrop-timeout', false); 
     } 
     else 
     { 
     $('.deltaDrop ul').stop(false,true).slideUp(450); 
     $('.delta').css('background-position','-61px 0'); 
     } 
    } 
); 

Answer 4

Cela devrait fonctionner.

$(".deltaDrop").hover(function(){ 
    $('.deltaDrop ul').stop(false,true).hide(1).delay(250).slideDown(); 
    $('.delta').css('background-position','-61px -70px'); 
},function(){ 
    $('.deltaDrop ul').stop(false,true).show(1).delay(450).slideUp(); 
    $('.delta').css('background-position','-61px 0'); 
}); 

.delay ne fonctionne que lorsque vous avez affaire à la file d'attente d'animation. .hide() et .show() sans arguments n'interagissent pas avec la file d'attente d'animation. En ajoutant les .hide(1) et .show(1) avant le .delay() fait attendre les animations de diapositives dans la file d'attente.