Grow your CSS skills. Land your dream job.

jQuery fadeOut conflicting with CSS opacity

  • # February 26, 2013 at 4:13 am

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

    # February 26, 2013 at 5:20 am

    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.

    # February 27, 2013 at 6:41 am

    Cheers!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".