2010-02-02 3 views
1

У меня, похоже, возникли проблемы с использованием jQuery для создания простого увеличения в IE. В Firefox все хорошо, но IE сообщается большинством пользователей как прерывистый.jQuery Image/Hover Preview Causeing Choppy Behavior in IE7

Я отключил код в IE (используя jQuery.browser.msie), но, если возможно, хотел бы помочь кому угодно.

Мой исходный код jquery ниже (игнорируйте функцию upport).

this.imagePreview = function(){ 
/* CONFIG */ 

    xOffset = 10; 
    yOffset = 20; 

    // these 2 variable determine popup's distance from the cursor 
    // you might want to adjust to get the right result 

/* END CONFIG */ 
$("a.preview").hover(function(e){ 
    this.t = this.title; 
    this.title = ""; 
    this.inside = $(this).attr('inside') 
    this.outside = $(this).attr('outside') 
    var c = (this.t != "") ? "<br/>" + this.t : ""; 
    $("body").append("<p id='preview'><img width='260' src='"+ this.inside +"' />"+ c +"</p>");   
    $("#preview") 
    .css("top",(e.pageY - xOffset) + "px") 
    .css("left",(e.pageX + yOffset) + "px") 
    .fadeIn("fast");  
    }, 
function(){ 
    this.title = this.t; 
    $("#preview").remove(); 
    }); 
$("a.preview").mousemove(function(e){ 
    $("#preview") 
    .css("top",(e.pageY - xOffset) + "px") 
    .css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 
$(window).load(function(){imagePreview();}); 

Вот пример одного из веб-страниц, о которых идет речь: http://www.engreet.com/CategoryDetail.aspx?cid=17. Если вы перечисляете в источник, вы увидите, что эскизы имеют опрокидывание/при наведении курсора мыши превью внутри используя код, как например:

<a href="/CardDetailFull.aspx?cid=670" outside="http://static.engreet.com/ArtistFiles/51/Happy_Bela_Front_633998103802577482.jpg" inside="http://static.engreet.com/ArtistFiles/51/Happy_Bela_InsideRight_633998103832264982.jpg" title="Inside Preview" class="preview"> 
<img src='http://static.engreet.com/ArtistFiles/51/_128X178_Happy_Bela_Front_633998103802577482.jpg' alt="" width="128" /> 
</a> 

Любая помощь будет благодарност. Счастливый, чтобы отправить кому-то код для нескольких бесплатных карточек!

Спасибо, Адам

+0

Нет Windows здесь, чтобы протестировать, но: как другие примеры hover работают для тех, кто жалуется на вашу реализацию? Как http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/? – Arjan

+0

И: что означает «изменчивость»? Может ли http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup помочь? – Arjan

ответ

1

Проблема закончилась быть прозрачным фоном PNG изображение, которое повторялось. Это было 1x1 и заполнение квадратного холста 755x600. Увеличивая это до 25x25, все проблемы решены. Было сумасшедшим, как эта проблема проявилась, воздействуя на jQuery, когда в конечном итоге это был безумный рендеринг IE, который все время вызывает проблему!

Надеюсь, что это поможет кому-то в будущем.