The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS jQuery fadeOut conflicting with CSS opacity

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #42983

    Check out this here pen:

    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:

    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.



Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.