jQuery - IE8 中的动画不透明度答案

【问题标题】：jQuery - Animating opacity in IE8jQuery - IE8 中的动画不透明度
【发布时间】：2011-12-01 14:55:54
【问题描述】：

在我目前正在处理的网站上，我有一个 <ul>，其中包含 <li> 的负载，每个都包含 <div>、<span>、<img> 等。

当我将鼠标悬停在<li> 之一上时，我正在使用 jQuery 将所有 other <li> 的不透明度设置为 0.3，以引起对焦点 @ 的注意987654331@.

我的问题是 IE8（并且只有 IE8）正在为<li> 的不透明度设置动画，但在<li> 中没有任何子元素。

有人遇到过这个问题，或者知道解决方法吗？

谢谢！

编辑：

请参阅以下 jsFiddle 示例 - http://jsfiddle.net/BJ8gK/22/

【问题讨论】：

将您的代码发布在 jsfiddle 或其他东西中
我无法在此处复制该问题：jsfiddle.net/jfriend00/BJ8gK。您能否更具体地了解您的 HTML 和执行动画的 jQuery 代码。
您必须发布一些代码！我们不是读心者。
仅供参考，IE 使用 filter 控制不透明度，filter 在某些情况下仅适用于子对象，但这些情况特定于您的 HTML 和 CSS。
抱歉，请参阅下面的 jsFiddle 示例。我可以确认问题已在我的 IE8 中复制 - jsfiddle.net/BJ8gK/22

标签： jquery animation internet-explorer-8 opacity

【解决方案1】：

我遇到了类似的问题 - 在 IE8 中，为了确保子元素的不透明度在更改其父元素的不透明度时也会受到影响，您必须应用 css 规则

filter:inherit

到子元素。简单的修复，但可能晦涩难懂

【讨论】：

这解决了我的问题。我正在使用 jquery inview 插件显示/隐藏
。并且那里的子元素总是可见的。

【解决方案2】：

众所周知，IE8 的不透明度支持非常不稳定和错误。

jQuery 可以很好地从开发人员那里抽象出细节，但他们无法避免一个简单的事实，即该功能在此浏览器中无法正常工作。

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

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

【讨论】：

【解决方案3】：

我试图为 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');
});

【讨论】：