When you click on a module, a lightbox pops up. When you click the “close” button on the lightbox, the lightbox closes.
The issue is that I’m calling jQuery’s fadeOut() on the lightbox when the “close” button is clicked, but it’s not fading out (it is in Firefox, but in Webkit it just disappears after half a second).
If you inspect the element, you can see that the fadeOut is being applied to the element (its inline style changes really quickly), but the browser’s just not applying the opacity.
I’m pretty sure this is because the opacity of the lightbox is set to 1 during the CSS animation that runs when it first appears. Somehow this opacity is taking preference over the inline style.
I can’t set !important using fadeOut(), so that’s out of the question.
So I guess the question becomes: is there a way to override a value set during a CSS animation (or to unset that value)?