如何添加時間延遲

-1

我想在鼠標懸停上添加自定義類。因此，當鼠標懸停在.leftbar上時，會添加一個類並彈出它（我爲他設置了css）。如何爲彈出窗口添加slow或時間延遲？如何添加時間延遲

<script> 
$(document).ready(function(){ 
$(".leftbar").mouseenter(function() { 
$("body").addClass("myclass"); 
}); 
}); 

$(document).ready(function(){ 
$(".leftbar").mouseleave(function() { 
$("body").removeClass("myclass1"); 
}); 
}); 
</script>

我想這 - $("body").addClass("myclass" , '300');沒有運氣

謝謝！

來源

2014-10-20 Netizen

看一看http://stackoverflow.com/questions/2510115/jquery-can- i-call-delay-between-addclass-and- – r8n5n 2014-10-20 14:57:20

隊列是你的朋友：http://api.jquery.com/jquery.queue/ – lshettyl 2014-10-20 15:19:37

可以使用的setTimeout

$(document).ready(function(){ 
    $(".leftbar").mouseenter(function() { 
     window.setTimeout(function(){ 
      $("body").addClass("myclass"); 
     }, 300); 
    }); 
}):

見https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

來源

2014-10-20 14:55:55

使用setTimeout，是確保當光標離開將其清除。

小錯誤，但myclass != myclass1。

$(document).ready(function(){ 
    var barTimeout = 0; 
    $(".leftbar").on({ 
     mouseenter: function(){ 
      barTimeout = setTimeout(function(){ 
       $("body").addClass("myclass"); 
      }, 300); 
     }, 
     mouseleave: function(){ 
      if(typeof barTimeout !== 'undefined') clearTimeout(barTimeout); 
      $("body").removeClass("myclass"); 
     } 
    }); 
});

JSFiddle

來源

2014-10-20 14:56:00 George

非常感謝！這工作。我無法爲此代碼添加緩動效果 - http://jsfiddle.net/3ts4tb8a/。你能幫忙嗎？ – Netizen 2014-10-20 16:08:14

你可以看看在jQuery UI的方法addClass它允許你在一些動畫參數爲它傳遞。查看例子，這裏http://api.jqueryui.com/addClass/

供您使用的文件，它應該是爲增加在延遲addClass()

加入了jQuery庫的引用一樣簡單，然後改變你的代碼;

$("body").addClass("myclass", 300);

來源

2014-10-20 14:57:30

我試過[this]（http://pastebin.com/7qr8yh27），但沒有運氣。你能幫忙嗎？ – Netizen 2014-10-20 15:08:58

您是否添加了jQueryUI的引用？ – 2014-10-20 15:09:40

是的，請看看pastebin代碼 - http://pastebin.com/7qr8yh27。我嘗試了緩解效應。 – Netizen 2014-10-20 15:12:56

你可以這樣說：

$(document).ready(function() { 
    $(".leftbar").hover(function() { 
     $(this).delay(300).queue(function(next){ 
      $(this).addClass("myclass"); 
      next(); 
     }); 
    }, function(){ 
     $(this).delay(300).queue(function(next){ 
      $(this).removeClass("myclass"); 
      next(); 
     }); 
    }); 
});

看看這裏：JSFiddle

來源

2014-10-20 16:09:06

您可以幫助添加緩動效果嗎？這是我嘗試 - http://jsfiddle.net/3ts4tb8a/。 – Netizen 2014-10-22 04:00:15

如何添加時間延遲

回答

相關問題