jQuery.fadeIn () / FadeOut ().Не работает в IE7 + 8

Question

У меня есть проект Ruby on Rails, который отображает иллюстрации.Вверху есть ссылки на категории, которые затухают на иллюстрациях, заменяют их новым контентом, а затем возвращаются обратно.

Я использую jQuery 1.6.2.

В Safari работает должным образом5, Firefox 6, Chrome 14 и IE9.В IE7 + 8 html заменяется новым контентом, но затухание не происходит.

Для начала я использовал элементы html5, поэтому подумал, что это возможно, но с тех пор я заменил их все на div ипроблема все еще показывает.Я попытался добавить / удалить библиотеки Modernizr и Selectivizr безрезультатно.Любая помощь приветствуется, код выглядит следующим образом:

app / views / illustrations / index.html.erb

<div id="illustrations" class="illustration-list">
  <%= render @illustrations %>
</div>

app / views / illustrations/_illustration.html.erb

<div class="illustration">
  <div class="figure">
    <%= link_to image_tag(illustration.image.url(:thumb), alt: illustration.title), illustration %>
    <div class="figcaption">
      <%= link_to illustration.title, illustration %>
    </div>
  </div>
</div>

app / views / shared / _category_links.html.erb - который запускает ajax

<ul>
  <% category_links.each do |category| -%>
    <li class="<%= category.name.downcase %>">
      <%= link_to category.name, category, remote: true %>
    </li>
  <% end -%>
</ul>

инаконец, / app / views / Categories / show.js.erb

var data = "<%= escape_javascript(render(@illustrations)) %>";
var div = $('#illustrations');
div.fadeOut("slow", function() {
  div.html(data);
  div.fadeIn('slow');
});

EDIT Вот пример без изображений, но вы должны иметь возможность получитьидея, http://jsbin.com/ifisuh/4/edit#preview.

Answer 1

Поддержка непрозрачности IE7 / 8 очень слабая. Как упоминалось в первом комментарии, для него требуется ActiveX, поэтому первым портом захода является следующее:

• ваш компьютер с ОС Windows поддерживает его (ему не нравятся виртуальные машины или настольные ПК с низким уровнем цветности).
• у вас установлены соответствующие библиотеки DLL.
• Ваша копия IE настроена для разрешения ActiveX в соответствующей зоне.

Очевидно, что это должно быть правильно настроено для любого клиента IE7 / 8. В интрасети это может означать, что вам придется вручную проверять компьютер каждого пользователя. С другой стороны, если ваш сайт будет использоваться в Интернете в целом, у вас никогда не будет никакой гарантии, что какой-либо пользователь IE сможет увидеть ваши эффекты непрозрачности. (хотя, честно говоря, большинство пользователей IE должны быть в порядке)

Но даже если вы можете заставить его работать, непрозрачность IE имеет ряд известных ошибок, особенно при работе с изображениями. Некоторые из этих ошибок можно обойти, настроив изображение - используя другой формат изображения; избегать какого-либо чисто черного или белого на изображении; не пытайтесь выцветать изображения с альфа-прозрачностью; и т.д. - но некоторых ошибок просто невозможно избежать. Вам также следует избегать попыток одновременно выцветать элементы grpahic и text, поскольку это может сделать ошибки более заметными (так как текст выцветает более плавно, чем рисунок). [Я не могу найти сайт, на который хочу сослаться в данный момент, который объясняет некоторые из них более подробно; отредактирую этот ответ, когда (если) найду его]

Суть в том, что замирание в IE7 / 8 очень популярно. Если это подходит для вас, отлично; но очень часто это просто невозможно сделать так, как вы хотите. Для некоторых сайтов это означает, что лучшим решением будет просто не пытаться исчезнуть с IE7 / 8.

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

Answer 2

Вы завернули свой код?

$(function() { // to fire when jquery is loaded
  var data = "<%= escape_javascript(render(@illustrations)) %>";
  var div = $('#illustrations');
  div.fadeOut("slow", function() {
    div.html(data);
    div.fadeIn('slow');
  });
});

Убедитесь, что этот код не запускается до загрузки jquery, иначе может появиться ошибка, которая приводит в бешенство IE.

Ктознает?Это может быть нелепой проблемой, например, если у вас есть массив, который является ['example',], весь JavaScript 7 IE перестает работать, потому что существует неопределенный массив для instance.