Need help with JQuery Animate and selecting elements

My Code Pen

I’m trying to fade out the background with $("#background::before").animate({opacity: 0}, 2000); when I click the button. But it doesn’t seem to be targeting #background::before properly.

If I change it to anything else like $("h1").animate({opacity: 0}, 2000); it works just fine.

JQuery’s .FadeOut() and .FadeIn() don’t seem to work either.

This code works

$("#background").animate({opacity: 0}, 2000);

But the problem is everything fades to black since your code is also inside the same background div

Yea. That’s the problem. I’m trying to find a way to just fade out the background.

Why not make 2 separate divs so you can fade Bldg without affecting the rest.

I’m not sure what you mean. I’m changing the background image through #background with #background::before. If I just change #background, then all the child divs get faded as well.

I’ve found a solution to the problem and will be using a different approach: