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: