delay sliddown（）/slideup（） - jQuery下拉

Question

我正在创建我正在创建一个下拉菜，我想延迟大约250毫秒，以便当有人快速浏览按钮时不会触发它。

这是我当前的代码。我尝试使用delay（）方法，但进展不顺利。

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

谢谢

Answer 1

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

然后，您可以使用clearTimeOut（）函数。

 clearTimeout(timer);

Answer 2

这应该起作用。

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

。延迟 仅在处理动画队列时起作用。 .hide() 和 .show() 没有参数，就不会与动画队列相互作用。通过添加 .hide(1) 和 .show(1) 之前 .delay() 使幻灯片动画在队列上等待。

Answer 3

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

Answer 4

未经测试的，未反驳：

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