jQuery - 在IE8中实现透明度动画效果

Question

我正在处理的网站上有一个包含许多 <li> 的 <ul>，每个 <li> 包含 <div>、<span>、<img> 等元素。当我悬停在其中一个 <li> 上时，我使用 jQuery 将所有其他 <li> 的不透明度动画设置为 0.3，以突出显示聚焦的 <li>。我的问题是 IE8（仅限 IE8）动画显示了 <li> 的不透明度，但没有在该 <li> 中的任何子元素（child elements）。是否有人遇到过此问题或知道解决方法？谢谢！请查看下面的 jsFiddle 示例 - http://jsfiddle.net/BJ8gK/22/。

- Probocop

---

请在JSFiddle或类似网站上发布您的代码。 - Dan

我无法在这里复制问题：http://jsfiddle.net/jfriend00/BJ8gK/。你能否更具体地描述一下你的HTML和jQuery代码，以便进行动画处理？ - jfriend00

你必须提交一些代码！我们不是心灵读者。 - Sparky

FYI，IE使用“filter”来控制不透明度，“filter”仅在某些情况下适用于子对象，但这些情况特定于您的HTML和CSS。 - jfriend00

抱歉，请参考以下 jsFiddle 示例。我可以确认该问题在我的 IE8 中重现 - http://jsfiddle.net/BJ8gK/22/ - Probocop

Answer 1

我曾经遇到类似的问题——在IE8中，为了确保更改父元素透明度时子元素的透明度也会受到影响，您必须应用以下CSS规则

filter:inherit

将其应用于子元素。这个修复方法很简单，但可能有点晦涩

- Buzz Robinson

---

这解决了我的问题。我正在使用jquery inview插件显示/隐藏<section>，但其子元素始终可见。 - Shan Robertson

Answer 2

我试图在Datatable中对行的不透明度进行动画处理，并发现JQuery 1.10确实尝试在内部解决IE8的不透明度问题。但它并没有解决继承元素的问题。以下代码片段可以帮助其他人，它会在分页表格上添加和显示新行：

// add the row to the table
newRow = dTable.row.add(rowData);
dTable.draw();
newIdx = newRow.index();
pos = dTable.rows()[0].indexOf(newIdx);
// draw item on correct page, from page.jumpToData()
if (pos >= 0) {
  var page = Math.floor(pos / dTable.page.info().length);
  dTable.page(page).draw(false);
  var jqRow = newRow.nodes().to$();
  var cells = jqRow.children('th,td');
  if (editable > 0) {
     // focus on first editable cell in new row...
     cells.eq(editable).click();
  }
  // child elements need to inherit - see answer by Buzz
  cells.css( 'filter', 'inherit');
  jqRow.addClass('highlight').css('opacity', 0.2);
  jqRow.animate({opacity: 1.0});
  jqRow.animate({opacity: 0.2});
  jqRow.animate({opacity: 1.0}, 2000, 'swing', function () {
  $(this).removeClass('highlight');
});

- vogomatix

Answer 3

众所周知，IE8对不透明度的支持非常不稳定和有缺陷。

jQuery在抽象化开发者的细节方面做得很好，但他们无法避免这个简单的事实：这个特性在这个浏览器中效果不佳。

我的建议是完全改变策略，而不是淡出你可以看到的元素，而是有一个隐藏的元素，它是一个相同大小的纯白色框，然后淡入。

效果将会大致相同，但在IE中应该会更好，因为你只会影响单个元素的不透明度。

- Spudley