簡體   English   中英

延遲slideDown()/ slideUp()-jQuery下拉列表

[英]Delay slideDown()/slideUp() - jquery dropdown

我正在創建我正在創建的下拉菜單,我希望延遲約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');
});

謝謝

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

然后,您可以像這樣使用clearTimeout()函數。

 clearTimeout(timer);

這應該工作。

$(".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僅在處理動畫隊列時有效。 不帶參數的.show() .hide().show()不會與動畫隊列交互。 通過添加.hide(1).show(1)的前.delay()使得滑動動畫等待隊列中。

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

未經測試,未經重構:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM