JQuery - Animating Opacity in IE8

Question

The site I'm working on now has a <ul> containing a load of <li> , each of which contains a <div> , <span> , <img> , etc.

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

My problem is IE8 (and only IE8) animates the opacity of <li> , but not one of the children inside this <li> .

Has anyone encountered this problem before or was aware of a fix?

Thanks!

EDIT:

For an example, see the following jsFiddle example: http://jsfiddle.net/BJ8gK/22/

Answer 1

I had a similar problem - in IE8, in order to ensure the transparency of the children, it also affects the change in the opacity of their parent, you must apply the css rule

 filter:inherit 

child elements. A simple fix, but possibly obscure

Answer 2

IE8 opacity support is well known as very flaky and buggy.

jQuery does a great job of distracting the details from you as a developer, but they cannot escape the simple fact that the function does not work in this browser.

My recommendation would be to completely change the checkmark, and instead of fading out the element you see, there is instead a hidden element that is a simple white box of the same size and disappears instead.

The effect will be about the same, but should work better in IE, because you will only affect the opacity of one element.

Answer 3

I tried animating line opacity in Datatable and found that jQuery 1.10 was trying to internally solve IE8 opacity. However, it does not fix the problem with inherited elements. This piece of code that adds and shows a new row in 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'); });