jQuery.fadeIn()/fadeOut(). Not working in IE7+8

I'm have a Ruby on Rails project which displays illustrations. There are category links at the top which fade out the illustrations, replaces it with new content and then fades back in.

I am using jQuery 1.6.2.

It works as expected in Safari 5, Firefox 6, Chrome 14 and IE9. In IE7+8 the html is replaced with the new content but no fade occurs.

To begin with I was using html5 elements so thought it could be that, but I've since replaced them all with divs and the problem开发者_如何学运维 still shows. I've tried adding/removing Modernizr and Selectivizr libraries to no effect. Any help is appreciated, code is as follows:

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 - Which triggers the ajax

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

and lastly /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 Here is an example without the images, but you should be able to get the idea, http://jsbin.com/ifisuh/4/edit#preview.

IE7/8's opacity support is very flaky. As mentioned in the first comment, it requires ActiveX, so the first port of call is to ensure that:

• your Windows machine supports it (it doesn't like VMs or low-color desktops).
• you have the appropriate DLLs installed.
• your copy of IE has is configured to allow ActiveX in the appropriate zone.

Obviously this would need to be set up correctly for any IE7/8 client. On an intranet, this may mean you have to manually check each user's machine. On the other hand, if your site is going to be used on the internet at large, then you will never have any guarantee that any given IE user will be able to see your opacity effects. (although to be fair, most IE users should be okay)

But even if you can get it to work, IE's opacity has a number of known bugs, especially when working with images. Some of those bugs can be worked around by tweaking the graphic -- using a different image format; avoiding having any pure black or white in the image; don't try to fade images with alpha transparency; etc -- but some bugs simply can't be avoid. You should also avoid trying to fade grpahic and text elements at the same time, as this can make the bugs more noticable (as the text fades more smoothly than the graphic). [I can't find the site I want to reference at the moment which explains some of this in more detail; will edit this answer when (if) I find it]

The bottom line is that fading in IE7/8 is very hit-and-miss. If it goes right for you, great; but very often it simply can't be done in the way you'd want to. For some sites this means that the best solution is simply not to even try fading with IE7/8.

I'm sorry I'm not giving you very good news here. I hope some of the tips I've given will help, but please be prepared in case they don't.

Have you wrapped your code?

$(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');
  });
});

Make sure this code isn't fired before jquery is loaded, else there might pop up an error which drives IE nuts.

Who knows? It could be a ridicilous problem such as you have an array which is ['example',] IE 7's entire javascript stops working because there's a non defined array for, instance.