Avoiding a CSS3 box-shadow to be seen while fading in a <li>

I'm fading in some <li> elements (boxes) when my users click a button. The boxes used to have PNG backgrounds and now I'm replacing them with pure CSS. I'm using Getting clever with CSS3 Shadows, using li:after.

The problem with this method is that when I fadeIn the boxes they'll naturally have opacity and thus the shadow will be seen through.

Setting the box-shadow on the <li> element doesn't create the shadow effect I'm after. I tried creating a that I append once the fadeIn is complete, and it sorta works but is noticeable开发者_如何学C.

Any ideas on a better way?

Could do with by wrapping it all up in a "wrapper" element inside the li element and then fading the li element.

Example: http://jsfiddle.net/petersendidit/ncBtV/1/embedded/result/

Only tested it in Chrome dev and Firefox 4

Can you add a class when the animation is completed...

CSS

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

jQuery

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