jQuery IE Fadein и Fadeout Opacity

Question

Я получаю эту странную проблему в IE с оверлеем CSS, который я подаю для лайтбокса. В основном я использую fadein а также fadeout для jquery - проблема в том, что все работает отлично, за исключением IE,

В IE - я не получаю Fadein - скорее это просто идет прямо на фоне непрозрачности.

При исчезновении - он удаляет "непрозрачность" на < 1 секунду и переводит страницу в "сплошной цвет" перед удалением наложения.

Кто-нибудь знает, как исправить эту ошибку? Это действительно раздражает - я использую все правильные фильтры и т.д., это просто исчезновение и исчезновение в IE?

Answer 1

У меня была такая же проблема в IE8. Установка непрозрачности DIV в JavaScript до того, как я вызвал fadeIn(), решила проблему:

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

При этом использовался простой DIV, а не прозрачный PNG.

Answer 2

Может быть, это хорошее решение для вас (для меня это). Решение простое, но эффективное (и очень приятное). 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, потому что этот "взлом" не влияет на другие браузеры.

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

Answer 3

Трудно сказать без точного кода, но я знаю, что у IE есть проблемы с применением fade для элементов с position: relative поэтому на вашем месте я бы проверил, имеют ли элементы, которые вы пытаетесь исчезнуть, непосредственно или через своих родителей, position: relative применяется. Надеюсь, поможет.

Answer 4

@LoveMeSomeCode (я не могу ответить прямо на ваше сообщение, так как stackru, по-видимому, считает, что мне нужно X репутации, потому что я могу ответить на чье-то сообщение - почему?!?!) Я считаю, что это потому, что действительно хромая функция, которая поставляется с IE8 " Совместимость просмотра (да, даже ламер, чем сам режим).

Я заметил, что при просмотре веб-сайта, который я разрабатываю на работе (когда я работаю в IE), люди сталкиваются со всеми видами странного поведения. Немного поиграв, я обнаружил, что в IE8 есть настройка, в которой OUT-OF-BOX устанавливает все локальные страницы для отображения в режиме совместимости! Независимо от вашего документа декларации или строгости разметки, IE8 будет использовать представление совместимости для всех страниц интрасети (и я предполагаю, что localhost одинаков).

Нажмите Инструменты> Настройки представления совместимости> Снимите флажок "Отображать сайты интрасети в представлении совместимости"

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

Answer 5

Также есть проблема с использованием этого нежелательного браузера.

Вы также можете проверить, когда браузер IE, а не использовать .animate({opacity:0}) вам придется использовать .animate({opacity:'hide'}),

Answer 6

В ситуации, в которой я наблюдал эту проблему, я смог частично ее исправить, используя метод, описанный @Erwinus. Использование этой техники сделало ореол намного менее уродливым, но странную черную ауру все еще можно было увидеть.

Я смог применить фон к самому изображению,

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

И это решило проблему отлично. Я вставил его в мой файл iefix.css, который включен через условные комментарии. Он не требует дополнительного HTML и обеспечивает еще более приятный эффект затухания, чем другое решение.

Это, очевидно, не обязательно будет решением для всех случаев, но было жизнеспособным для меня и работало хорошо.

Answer 7

Вот еще одно потенциальное решение этой проблемы... Предположительно, у jQuery есть некоторые проблемы (до версии 1.4?) С определением прозрачности, установленной с помощью CSS. Кажется, что нет проблем, если вы устанавливаете непрозрачность элементов с помощью jQuery до анимации прозрачности (fadeIn, fadeOut, fadeTo и animate). Например, вы можете установить непрозрачность с помощью CSS для браузеров, которые его поддерживают, а затем также поставить поверх этой установки прозрачность с помощью jQuery, и тогда она должна работать правильно в IE. Это также случай для отображения нет.

Пример:

$('#element').css("opacity","0").fadeIn("slow");

Источник: http://www.boagworld.com/forum/comments.php?DiscussionID=3555

Answer 8

Хорошо, у меня были проблемы с этим, и ни одно из решений, которые я нашел онлайн, не работало. Это сводило меня с ума, потому что, если вы посмотрите на сайт W3C: http://www.w3schools.com/Css/css_image_transparency.asp, это сработало в IE8. Но я копирую его в мою среду разработки.

У меня был этот код:

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

И эта разметка:

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

Работало в FF, Chrome, все НО IE8.

В итоге мы поняли, что IE8 не применяет скрипт при работе с localhost. Я скопировал этот код на веб-хостинг, и BAM!, работает отлично. Не знаю, почему IE8 делает это, но я вижу в этом еще одну причину, по которой разработчики не любят IE.

Может быть, это только я.