Избегание тени CSS3, которая будет видна при затухании в <li>

Question

Я исчезаю в некоторых <li> элементах (полях), когда мои пользователи нажимают кнопку. У ящиков раньше были фоны PNG , и теперь я заменяю их чистым CSS. Я использую Умный с CSS3 Shadows , используя li:after.

Проблема с этим методом в том, что когда я fadeIn, ящики будут иметь непрозрачность, и, таким образом, тень будет видна через .

Установка box-shadow для элемента <li> не создает эффект тени, который я ищу. Я попытался создать то, что я добавляю, как только fadeIn завершен, и это работает, но заметно.

Есть идеи, как лучше?

Answer 1

Можно обойтись, обернув все это в элемент "wrapper" внутри элемента li и затем замирая элемент li.

Пример: http://jsfiddle.net/petersendidit/ncBtV/1/embedded/result/

Только провереноэто в Chrome Dev и Firefox 4

Answer 2

Можете ли вы добавить класс после завершения анимации ...

CSS

li.completed-fade {
   box-shadow: ...
}

JQuery

$('li').fadeIn(500, function() { $(this).addClass('completed-fade'); });