Change Css if Oopacity is equal to 0

Question

I have this content that I let disappear by clicking on a button. Since I want to make this with a smooth transition, I use opacity for that. But here is the problem:

The Content is on top of other content via z-index. If the content is hidden, I want to click on the Content that gets revealed. To hide the content I use the following code:

$('.close-button').click(function(e) {
      $('.hidden-content').css({
        "opacity":"0"
        });
    });

To solve my problem I just could change the z-index in the same function. But if I do that I lose my smooth transition of disappearing that content. So what I need is another code that is executed after the one above and changes the z-index only after the opacity is set smoothly to 0. For this I tried some if statements like the following:

var hide = $('.hidden-content').css('opacity');
if (hide == 0)
         $('.hidden-content').css({
        "z-index":"-1"
         });

and also:

$(function() {
    if ($('.hidden-content').css('opacity') == 0)
         $('.hidden-content').css({
        "z-index":"-1"
      });
});

Nothing seem to work. It seems like a small piece but it already cost me hours. That is why I created an account here and reach out for help since so many posts helped me in the past.

And before I forget to mention: I am quite new to all this so maybe there is a super easy solution (hopefully).

If you need any more information, please let me know. Thank you!

score 0 · Answer 1 · answered Mar 27 '22 at 23:39

0

If you're changing the opacity using a CSS animation, you can create a keyframe at the very end of the animation to change the z-index.

So if you have an animation that looks like this:

@keyframes opacityanimation {
   0% { opacity: 100; }
   100% { opacity: 0; }
}

You can modify it to change the z-index at the very end:

@keyframes opacityanimation {
   0% { opacity: 100; }
   99% { opacity: 0; }
   100% {
       opacity: 0;
       z-index: -1;
   }
}

Note that you have to set opacity to 0 at the very end as well.

answered Mar 27 '22 at 23:39

mattd

47
1
8

How can I combine it with this JS code? Can I do something like $('.hidden-content').css({ "animation":"opacityanimation" }); and then define the keyframes in CSS? – Buzznfrog Mar 28 '22 at 20:33
Typically animations are triggered by adding and removing classes from the element. More information here: https://stackoverflow.com/a/44846799/3785038 – mattd Mar 29 '22 at 13:37

score 0 · Accepted Answer · answered Mar 28 '22 at 03:25

0

You can animate the opacity and then change the z-index, when the animation is complete:

$('.close-button').click(function(e) {

$('.hidden-content').animate({"opacity":"0"}, function(){
$(this).css({"zIndex":"-1"})
});

});

answered Mar 28 '22 at 03:25

Ned Hulton

477
3
12
27

This worked like a charme! Thank you very much. I tried to implement this also in another function to hide the same div when scrolled down: $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.paid-kurzy-content').animate({"opacity":"0"}, function(){ $(this).css({"zIndex":"-1"}) }); }); But this does not work... do you have an idea why if it is not asked too much? – Buzznfrog Mar 28 '22 at 22:02
No problem, please like and accept my answer so that I can get the points. You should ask another question and then add a code snippet. – Ned Hulton Mar 29 '22 at 15:16

Change Css if Oopacity is equal to 0

2 Answers2