jquery懸停IE中的背景閃爍

我正在使用jquery做一個脫節的懸停效果。我有一個帶背景圖像的div，當您將鼠標懸停在其中一個菜單項上時，它會向div添加一個類並更改背景圖像。但它的效果很好，它會在每個IE版本中閃爍（略微延遲）。見下面的代碼：jquery懸停IE中的背景閃爍

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

有什麼可以做到這一點？

來源

2010-11-13 Batfan

這不完全是語義的，但您可以在#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')。

來源

2010-11-13 03:07:55

嗯，好主意布萊恩。星期一我會試試。 – Batfan 2010-11-13 22:44:30

現在使用背景位置，而不是延遲。謝謝！ – Batfan 2010-11-15 15:39:50

'背景位置'救援！很高興工作。 – 2010-11-15 20:39:33

你不能比這更快，AFAIK。 jQuery使用屬性操作（如操作類）的速度非常快，但IE只是一個非常慢的瀏覽器。

來源

2010-11-13 00:53:14 jwueller

我有一個類似的問題，在IE瀏覽器中閃爍的背景圖像時，我用懸停在JQuery上更改背景圖像。在我的情況下，我有一組灰度圖像，並在它們上方盤旋，將它們翻轉成彩色。這是一個CMS，所以客戶只願意上傳一張彩色圖像，其餘部分自動完成。我意外地偶然發現了一個解決方案，可能會幫助某人。

我注意到當我創建相同的背景圖像，但作爲一個普通的圖像在頁面上ie。閃爍的光芒消失了。所以我所做的只是當我們仍然擔心撥號上的低帶寬用戶體驗時，我們曾經習慣的老派圖像預加載技巧。

創建一個帶有display：none屬性的div，並在其中插入我所有閃爍圖像的副本。

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

我知道它增加了頁面大小，但據我可以看到停有沒有視覺變化頁面閃爍。我檢查它在IE和FF，它似乎工作

來源

2011-03-09 17:20:01 Abie

jquery懸停IE中的背景閃爍

回答

相關問題