In Internet Explorer the css filter property is used for opacity whenever you run show / hide. View this in IE6 or IE7. The box should have a pink gradient achieved using the css filter rule. On hiding the element the css gradient disappears for good. Even trying to show it again, the gradient is lost.

The style attribute of the #test element is edited during the transition to alter opacity and when the animation finishes filter is set as empty string on the elements style attribute. Thus the css rule for the gradient is wiped out.

As a solution I think either

1. At the end of the transition the filter rule in the style of #test should be removed so the css rule gets the power back. (Try clicking magic button to demonstrate).
2. Opacity should not be applied for elements which already have the filter css rule.

magic (ie5.5-7)