如何添加时间延迟

Question

我想在鼠标悬停上添加自定义类。因此，当鼠标悬停在.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');没有运气

谢谢！

Answer 1

可以使用的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

Answer 2

使用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

Answer 3

你可以看看在jQuery UI的方法addClass它允许你在一些动画参数为它传递。查看例子，这里http://api.jqueryui.com/addClass/

供您使用的文件，它应该是为增加在延迟addClass()

加入了jQuery库的引用一样简单，然后改变你的代码;

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

Answer 4

你可以这样说：

$(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