Verzögerung slidedown () / slideUp () - Jquery Dropdown

Question

Ich schaffe ich einen Tropfen erschaffe unten denen ich Verzögerung wollen etwa 250 ms, so dass es nicht ausgelöst wird, wenn jemand schnell läuft über die Taste.

Hier ist mein aktueller Code. Ich habe versucht, die Verzögerung () Methode verwendet, aber es ist nicht gut.

$(".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');
});

Danke

Answer 1

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

Dann können Sie die clear () Funktion wie diese verwendet werden.

 clearTimeout(timer);

Answer 2

Das sollte funktionieren.

$(".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 funktioniert nur, wenn man es zu tun mit der Animation Warteschlange. .hide() und .show() ohne Argumente nicht interact mit der Animation Warteschlange. Durch das Hinzufügen macht die .hide(1) und .show(1) vor dem .delay() die Folienanimationen in der Warteschlange warten.

Answer 3

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

Answer 4

Ungeprüfte, 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');
      }
    }
  );