jQuery的悬停不够快

Question

，当我离开的选择，如果我移动速度太快会不会发生unhover：

$("#item").hover(function(){ 

    $(this).addClass("hover"); 

    }function(){ 

    $(this).removeClass("hover"); 

    }); 

Answer 1

您可以使用.live创建项目之前设置的事件处理器。

或

function thover() { 
    $(this).toggleClass("hover"); 
} 

$("#item").mouseEnter(thover).mouseLeave(thover); 

或

$("item").hover(function() { $(this).toggleClass("hover",true); }, 
       function() { $(this).toggleClass("hover",false); } 
); 

Answer 2

我无法重现它。在Firebug的这个页面中写道：

$("p").hover(function() { $(this).html('a') }, function() { $(this).html('b') }); 

即使我移动速度真的很快，也许这是因为你在代码中第二个函数之前忘了逗号？你使用什么浏览器？

Answer 3

这里有一个解决方案：

CSS：

#item:hover, #item.hover { 
    background-color: #f0f; 
} 

的Javascript：

if ($.browser.msie) { // I'm not sure if IE7 or 8 support :hover yet 
    $('#item').hover(
     function() { $(this).addClass('hover'); }, 
     function() { $(this).removeClass('hover'); } 
    ); 
} 

此代码使您的边缘情况更薄。

良好的CSS支持体面的浏览器不应该因Javascript调用而放慢速度，因为IE是错误的。如果有人坚持使用IE浏览器，那么他们仍然会得到悬停效果，但有时可能会坚持下去。你真的很关心这些人吗？

Answer 4

悬停卡住的问题取决于您使用的浏览器。浏览器越新，JavaScript引擎速度越快。如何调用jQuery库也会产生变化（我建议调用lib的本地副本或使用Google库API）。随着库的每一个新版本的发布，它们越来越快，因为它们减少了代码，让事情变得更有效率，所以我建议在最新版本中调用。

随着jQuery 1.4.2及以上版本的发布，可以调用.toggle()函数，而不是指定悬停函数中包含的鼠标函数。你对代码的处理基本上与.hover(mouseover, mouseout)（基本形式）是一样的。您调用的每个函数（使用.removeClass和.addClass）都会调用每个鼠标操作。

使用此监守切换进行了优化，以取代鼠标功能会加快您的代码：

jQuery(document).ready(function($) { 
    $('#item').hover(function() { 
    $(this).toggleClass('hover'); 
    }); 
}); 

编辑：

然而，如果你想添加动画或指定属性.hover()函数，那么你最终将调用每个鼠标函数，就像你在原始代码中一样。尽管您也可以使用上面使用的代码并使用.toggleClass()中的函数。