jQuery setTimeout
我想为这个工具提示代码添加一个超时，所以它只显示鼠标是否在一段时间后hover在它上面而不是立即…我尝试添加setTimeout()但我无法弄清楚如何使用clearTimeout()所以工具提示不会隐藏在mouseout上。 你能帮我吗？
// ----------------------------------------------- // TOOLTIP MOUSE HOVER // ----------------------------------------------- function mcTooltip() { $('.mcTxb').mousemove(function(e) { var mcHoverText = $(this).attr('alt'); var mcTooltip = $('.mcTooltip'); $(mcTooltip).text(mcHoverText).show('fast'); $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); }).mouseout(function() { var mcTooltip = $('.mcTooltip'); $(mcTooltip).hide('fast'); }); } mcTooltip();
我试过这个：
// ----------------------------------------------- // TOOLTIP MOUSE HOVER // ----------------------------------------------- function mcTooltip() { $('.mcTxb').mousemove(function(e) { var mcHoverText = $(this).attr('alt'); var mcTooltip = $('.mcTooltip'); setTimeOut(function(){ $(mcTooltip).text(mcHoverText).show('fast'); }, 300); $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10); }).mouseout(function() { var mcTooltip = $('.mcTooltip'); $(mcTooltip).hide('fast'); }); } mcTooltip();
当您使用动画时，可以使用.delay()来推迟工具提示的外观：
$(mcTooltip).text(mcHoverText).delay(1000).show('fast');
在mouseout函数中，使用.stop取消任何现有的延迟或动画，然后隐藏工具提示：
$(mcTooltip).stop(true).hide('fast');
var my_timer; $('.mcTxb').hover( function () { my_timer = setTimeout(function () { //do work here }, 500); }, function () { clearTimeout(my_timer); } );
当你将mouseover在元素上时，这将等待半秒钟，如果你在半秒内mouseover则不会发生任何事情。
一种选择是使用hoverIntent插件来完成你想要的。
- 使用
hover()代替它，代码更少（而且总是好的，IMO）。
像这样：
function mcToolTip() { $(".mcTxb").hover(function(){ // mouseover stuff here $("element").delay(3000).show(); // 3 second delay, then show }, function(){ // mouseout stuff here }); }
这个问题很古老，但我想我会为别人回答。 超时不起作用的主要原因是“setTimeOut”。 你不能骆驼驼背出来的部分。 它的“setTimeout”。
setTimeout在鼠标hover或hover时不起作用。 使用.delay（）是安全的。
setTimeout(function(){ $(mcTooltip).text(mcHoverText).show('fast'); }, 300); // use this instead. $(mcTooltip).text(mcHoverText).delay(3000).show('fast');