如何添加时间延迟

问题描述：

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

谢谢！

看一看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

答

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

非常感谢！这工作。我无法为此代码添加缓动效果 - 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);

我试过[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

您可以帮助添加缓动效果吗？这是我尝试 - http://jsfiddle.net/3ts4tb8a/。 – Netizen 2014-10-22 04:00:15

如何添加时间延迟

相关推荐