jQuery - Animating opacity in IE8

On the site I'm currently working on I have an <ul> containing a load of <li>'s, which each contain <div>, <span>, <img> etc.

When I hover over one of the <li>'s, I'm using jQuery to animate the opacity of all the other <li>'s to 0.3 to draw attention to the focused <li>.

My problem is IE8 (and only IE8) is animating the <li>'s opacity, but none of the child elements within that <li>.

Anybody come across this issue before, or know of a fix?

Thanks!

EDIT:

Please see the开发者_StackOverflow following jsFiddle for an example - http://jsfiddle.net/BJ8gK/22/

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

IE8's opacity support is well known to be extremely flaky and buggy.

jQuery does a good job of abstracting the details away from you as a developer, but they can't avoid the simple fact that the feature does not work well in this browser.

My recommendation would be to change tack completely, and instead of fading out the element you can see, instead have a hidden element which is a plain white box the same size, and fade that in instead.

The effect will be much the same, but should work better in IE because you'll only be affecting the opacity of a single element.

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