How to fade from one div to another

[nsharony]

Hello.

My website is made up of two divs, each taking up the full screen.
At any given time, one is displayed and the other is hidden.

I would like to be able to switch between the two dives in a nice fading effect.
This means that if I switch from div1 to div2, the opacity of div1 should transition from opacity:1 to opacity0 and when it reaches 0, it should change its display to none and then div2 should change its display to block and transition from opacity 0 to 1.

See the following for what I have defined

I am using jQuery to change the CSS rules of div1 to noOpacity, but how can I make it also have the hidden CSS rule once the transition is over and then trigger then CSS change for div2?

Maybe it is not the right way of doing things.

Any assistance is appreciated.

[Beverleyh]

I am using jQuery to change the CSS rules of div1 to noOpacity

Looks like you’ve forgotten to include your JavaScript in the demo.

how can I make it also have the hidden CSS rule once the transition is over and then trigger then CSS change for div2?

With setTimeout()? https://www.sitepoint.com/jquery-settimeout-function-examples/

[Shikkediel]

You could also use .on and the transitionend event…

https://www.w3schools.com/jsref/event_transitionend.asp

[Author]

Posts