jQuery fadeOut conflicting with CSS opacity

[blimpage]

Check out this here pen: http://codepen.io/blimpage/pen/xsGqi

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)?

[Kitty Giraudel]

I guess this does the trick: http://codepen.io/HugoGiraudel/pen/4f0e71de65d9c432d3305516afb5624e.

Basically I edited the CSS animation to only handle opacity and transform. Not position and size.
Then, when clicking on the close button, I remove the class handling the CSS animation.

[blimpage]

Cheers!

[Author]

Posts