避免在淡入淡出时看到CSS3盒子阴影<li>

Question

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.

Any ideas on a better way?

Answer 1

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

Answer 2

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