JQuery Hover Background Flicker in IE

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(); 

Edit:

Вы также могли бы быть в состоянии решить эту проблему, сделав один спрайт изображение и ваш класс парения изменить background-position вместо изменения background-image. Таким образом, вам не нужно будет добавлять дополнительный элемент DOM. Если вы идете по этому маршруту, вы должны передать одну функцию hover() и использовать toggleClass('vette-over').

Answer 2

Вы не можете получить быстрее, чем AFAIK. Атрибуты-операции (например, манипулирование классами) очень быстрые с jQuery, но IE - это очень медленный браузер.

Answer 3

У меня была аналогичная проблема с мерцающими фоновыми изображениями в IE, когда я изменил фоновое изображение с помощью JQuery на зависании. В моем случае у меня был набор изображений, которые были в оттенках серого и нависшие над ними, перевернули их в цвет. Это для CMS, поэтому клиент был готов только загрузить одно цветное изображение и автоматизировать все остальное. Я случайно наткнулся на решение, возможно, это помогает кому-то.

Я заметил, когда создаю одно и то же фоновое изображение, но как простое изображение на странице, т.е. <img src=”bgImage1.jpg” /> мерцание ушло. Таким образом, все, что я делал, - это привычная предварительная тренировка изображения школьной фотографии, с которой мы привыкли, когда нас все еще беспокоят пользователи с низкой пропускной способностью, как в режиме коммутируемого доступа.

Создал div с дисплеем: нет атрибута и вытащил копию всех моих мерцающих изображений.

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

Я знаю, что это увеличивает размер страницы, но он останавливает мерцающий без каких-либо визуальных изменений на странице, насколько я могу видеть. Я проверил его на IE и FF, и он, похоже, работает