Question

我有一个显示插图的Ruby on Rails项目。顶部有类别链接，淡出插图，用新内容替换它，然后淡入。

我正在使用jQuery 1.6.2。

它可以在Safari 5，Firefox 6，Chrome 14和IE9中正常运行。在IE7 + 8中，html被新内容替换，但不会出现淡入淡出。

首先我正在使用html5元素，所以认为可能是这样，但我已经用div替换了所有这些，问题仍然显示出来。我试过添加/删除Modernizr和Selectivizr库没有效果。任何帮助表示赞赏，代码如下：

应用/视图/插图/ index.html.erb

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

应用/视图/插图/ _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');
});

编辑以下是没有图片的示例，但您应该能够理解http://jsbin.com/ifisuh/4/edit#preview。

Answer 1

IE7 / 8的不透明度支持非常不稳定。如第一条评论中所述，它需要ActiveX，因此第一个调用端口是确保：

您的Windows机器支持它（它不喜欢VM或低色桌面）。
您已安装相应的DLL。
您的IE副本已配置为允许在适当的区域中使用ActiveX。

显然，这需要为任何IE7 / 8客户端正确设置。在Intranet上，这可能意味着您必须手动检查每个用户的计算机。另一方面，如果您的网站将在互联网上使用，那么您将无法保证任何给定的IE用户都能看到您的不透明效果。（虽然公平，大多数IE用户应该没问题）

但即使你可以让它工作，IE的不透明性也有许多已知的错误，特别是在使用图像时。其中一些错误可以通过调整图形来解决 - 使用不同的图像格式;避免图像中出现任何纯黑色或白色;不要试图淡化具有alpha透明度的图像;等 - 但有些错误根本无法避免。您还应该避免尝试同时淡化grpahic和文本元素，因为这会使错误更加明显（因为文本比图形更平滑）。 [我现在找不到我想引用的网站，更详细地解释了一些内容;当（如果）我找到它的时候会编辑这个答案]

底线是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疯狂的错误。

谁知道？这可能是一个荒谬的问题，比如你有一个数组就是['例子'，] IE 7的整个javascript停止工作，因为有一个未定义的数组，实例。

jQuery.fadeIn（）/淡出（）。不适用于IE7 + 8

2 个答案: