Question

我正在使用Jquery做一个脱节的悬停效果。我有一个带有背景图片的div，当您将鼠标悬停在其中一个菜单项上时，它会向div添加一个类并更改背景图像。然而，它工作得很好，它在IE的每个版本中都会闪烁（轻微延迟）。请参阅以下代码：

$(document).ready(function() {
  $("#main-menu li a").hover(function() {
 $("#corvette").addClass('vette-over');
      }, function() {
        $("#corvette").removeClass('vette-over');
      });

有什么可以做的吗？

Answer 1

这不完全是语义，但您可以在#corvette内创建另一个以悬停图像为背景的元素。然后你只需要切换悬停元素。

检查出来：http://www.jsfiddle.net/bryandowning/RuBqW/

如果您愿意，可以随意使用fadeToggle()，但如果您确实在此之前添加了stop(true, true)。例如：

$("#image .hover").stop(true, true).fadeToggle();

修改

您也可以通过制作单个精灵图片并让您的悬停类更改background-position而不是更改background-image来解决问题。这样您就不必添加额外的DOM元素。如果你走这条路线，你仍然应该将一个功能传递给hover()并使用toggleClass('vette-over')。

Answer 2

你不能比那更快，AFAIK。使用jQuery，属性操作（比如操作类）非常快，但IE只是一个非常慢的浏览器。

Answer 3

当我在悬停时使用Jquery更改背景图像时，我在IE中出现了类似闪烁背景图像的问题。在我的情况下，我有一组灰度图像，并在它们上面盘旋，将它们翻转成彩色。这是一个CMS，所以客户只愿意上传一个彩色图像，其余的自动化。我不小心偶然发现了一个解决方案，也许它对某人有帮助。

当我创建相同的背景图像但是作为页面上的普通图像时，我注意到了。 <img src=”bgImage1.jpg” />闪烁消失了。所以我所做的只是当我们仍然担心拨号时的低带宽用户体验时我们过去做的旧学校图像预载技巧。

用display：none属性创建了一个div，并在那里放了我所有闪烁图像的副本。

<div style="display:none;">
    <img src="bgImage1.jpg" />
    <img src="bgImage1hover.jpg" />
</div>

我知道它会增加页面大小，但就我所见，它会停止闪烁，而不会对页面进行任何视觉更改。我在IE和FF上检查它似乎工作

在IE中Jquery Hover Background Flicker

3 个答案: