JQuery IE Fadein и Fadeout Opacity

Ответ 1

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

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

Это использовало только простой DIV, а не прозрачный PNG.

Ответ 2

То, что мы делаем здесь (см. пример ниже), состоит в том, чтобы добавить div, который почти прозрачен (прозрачен для глаза). Поскольку это первый div внутри canvas/container (= > a 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-код, потому что этот "взлом" не влияет на другие браузеры.

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

Мне удалось применить фон к самому изображению,

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

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

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

Ответ 6

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

Пример:

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

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

Ответ 7

Хорошо, у меня были проблемы с этим, и ни одно из решений, которые я нашел в Интернете, не работал. Это сводило меня с ума, потому что если вы посмотрите на сайт 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 не применяет script при работе с localhost. Я скопировал этот код до веб-хостинга и BAM!, отлично работает. Не знаю, почему IE8 делает это, но я считаю это еще одной причиной, по которой разработчики не любят IE.

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

Ответ 8

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

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

Нажмите "Сервис" > "Параметры просмотра совместимости" > "Отменить", в котором указано "Отобразить сайты интрасети в режиме совместимости"

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