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!
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.
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"})
});
});