jQuery - анимация непрозрачности в IE8 - PullRequest
Новая
       33

jQuery - анимация непрозрачности в IE8

4 голосов
/ 05 октября 2011

На сайте, над которым я сейчас работаю, у меня есть <ul> с загрузкой <li>, каждый из которых содержит <div>, <span>, <img> и т. Д.

При наведении курсора на один из <li> я использую jQuery для анимации непрозрачности всех других <li> до 0,3, чтобы привлечь внимание к сфокусированному <li>.

Моя проблема в том, что IE8 (и only IE8) анимирует непрозрачность <li>, но ни один из дочерних элементов в этом <li>.

Кто-нибудь пришелсталкивались с этой проблемой раньше или знаете исправление?

Спасибо!

РЕДАКТИРОВАТЬ:

Пожалуйста, см. следующий jsFiddle для примера - http://jsfiddle.net/BJ8gK/22/

Ответы [ 3 ]

16 голосов
/ 09 июля 2012

У меня была похожая проблема - в IE8, чтобы гарантировать, что непрозрачность дочерних элементов также изменяется при изменении непрозрачности их родительского элемента, вы должны применить правило css 

filter:inherit

дочерним элементам. Простое исправление, но, возможно, неясное

0 голосов
/ 11 июня 2014

Я пытался анимировать непрозрачность для строк в 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');
});
0 голосов
/ 06 октября 2011

Поддержка непрозрачности в IE8, как известно, чрезвычайно ненадежна и содержит ошибки.

jQuery хорошо абстрагируется от вас, как разработчика, но они не могут избежать простого факта, что функция не работает в этом браузере.

Я бы порекомендовал полностью изменить такт, и вместо того, чтобы затемнять элемент, который вы видите, вместо этого используйте скрытый элемент, представляющий собой простую белую рамку такого же размера, и замените его вместо этого.

Эффект будет примерно таким же, но в IE он должен работать лучше, потому что вы будете влиять только на непрозрачность одного элемента.

...