jQuery - IE8 中的动画不透明度

发布于 2024-12-08 04:00:35 字数 716 浏览 0 评论 0原文

在我当前正在处理的网站上，我有一个

，其中每个都包含
;、、等。

当我将鼠标悬停在其中一个

上时s,我使用 jQuery 将所有其他

的不透明度设置为 0.3，以引起人们对聚焦的

的注意。代码>.

我的问题是 IE8（并且仅 IE8）正在对

的不透明度进行动画处理，但该

< 中没有任何子元素/代码>。

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

谢谢！

编辑：

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黯然 2024-12-15 04:00:35

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

filter:inherit

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

I had a similar problem - in IE8 order to ensure child elements' opacity is also affected when changing the opacity of their parent element you have to apply the css rule

filter:inherit

to the child elements. Simple fix, but perhaps obscure

回复收藏 0 原文

徒留西风 2024-12-15 04:00:35

众所周知，IE8 的不透明度支持极其不稳定且存在缺陷。

jQuery 在将细节从开发人员手中抽象出来方面做得很好，但他们无法避免一个简单的事实：该功能在该浏览器中无法正常工作。

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

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

回复收藏 0 原文

睫毛上残留的泪 2024-12-15 04:00:35

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

I was trying to animate opacity on rows in a Datatable and found that JQuery 1.10 does try and solve the IE8 opacity internally. It does not however fix the inherited elements issue. This fragment of code, which adds and shows a new row on a paginated table, may help others:

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

回复收藏 0 原文

~没有更多了~