Проблемы с замиранием в Internet Explorer 7 при использовании jQuery

Question

Я использую jQuery на сайте, над которым я работаю, и все работает нормально - за исключением Internet Explorer 7 (и предыдущих версий, но сайт не поддерживает их). Взгляните на http://dev.staffanestberg.com/fromsweden/ в Safari или Firefox, затем в IE7, и вы поймете, что я имею в виду. В настоящее время я использую встроенный эффект FadeTo для затухания содержимого, но я также пытался создавать собственные эффекты, а также использовать Show / Hide, Animate и FadeUp / FadeDown. Я также использую SWFaddress на этом сайте, что может вызвать ошибки в сочетании с IE7, но разве это не будет отображаться и в других браузерах? Что мне не хватает?

-Staffan

Answer 1

Проблема шрифта Cleartype с постепенным исчезновением в jQuery

Это действительно хорошее объяснение точной проблемы. Это связано с шрифтом clear type в IE. Это исправление, которое я использовал.

Пример:

// This causes this text glich
$("#message").fadeIn();

// This will fix it
document.getElementById("#message").style.removeAttribute("filter");

Исправить это удалить фильтр.

$('#message').fadeIn(function(){
    this.style.removeAttribute("filter");
});

Источник

Answer 2

Я успешно заставил show/hide, fadeTo, fadeUp и fadeDown работать в IE6 и выше. Я обнаружил, что многие проблемы, возникающие у меня с анимацией, связанной с раскрытием элемента, связаны с тем, что данный элемент не был скрыт во время загрузки.

Попробуйте установить элемент (table или div), который постепенно увеличивается, в style="display:none" в html или программно.

Answer 3

jQuery.fn.fixClearType = function(){
    return this.each(function(){
        if(typeof this.style.filter  && this.style.removeAttribute)
        this.style.removeAttribute("filter");
    })
}

Answer 4

Я обнаружил, что лучше всего просто применять фон... Думайте об этом как о GIF. Так что нет jQuery. Чистый CSS

Answer 5

Может быть, это хорошее решение для вас (для меня это). Решение простое, но эффективное (и очень приятное). IE имеет проблемы с альфа-прозрачностью, когда фон его родителя не имеет цвета (полная прозрачность).

Что мы делаем здесь (см. Пример ниже), так это сначала добавляем div, который почти прозрачен (прозрачен для глаз). Поскольку это первый div внутри холста / контейнера (например, => div), и он помещается в абсолют, все содержимое после этого div будет помещено поверх первого div, поэтому это становится фоном всего другого содержимого. внутри этого холста.

Поскольку фон теперь есть, IE не показывает неприятных черных пятен (пикселей) или черных областей при исчезновении или уменьшении (при изменении непрозрачности) или при установке непрозрачности холста на значение ниже 100.

Как - пример с изображением 100x100:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

Чтобы увеличить или уменьшить изображение с помощью jQuery:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

Это также возможно:

$("myImage").fadeIn("slow");

Это оно!

Приятно то, что это решение также работает с VML/SVG (Raphael) или другим контентом с альфа-прозрачностью. Также вам не нужно менять / взламывать код JS, потому что этот "взлом" не влияет на другие браузеры.

Надеюсь, поможет.