I basically want to make the old quote fade out and then the new fade in

Question

https://code.sololearn.com/Ww9zfN0uIpJw/?ref=app

Answer 1

Sajid Here is how you do it with vanilla js :

https://code.sololearn.com/W5zVksiDSjYG/?ref=app

Answer 2

Just add this in body :

color: #fff;

Answer 3

Wrap everything inside window.onload method.

Answer 4

Do it like :

window.onload = () => {

// all codes go here

}

Also you can remove :

window.onload = randomThing

Answer 5

Arb Rahim Badsa pls check again. I'm seriously stucked here.

Answer 6

Sajid What do you want? Can you please explain it a bit?

Answer 7

Arb Rahim Badsa I copied the code from another editor. It's showing an error of null in solo learn. Can you fix it so I can explain better?

Answer 8

Arb Rahim Badsa getting another error

Answer 9

@thankssssss. I was trying for a long time. But why the background changes color fast.? I want to change at the same time. Can you answer this too

Answer 10

Sajid at line 39 of css code, change transition time to 2s.

Answer 11

Arb Rahim Badsa still not in sync lol. I shall try to get them in sync on my own. I shall not trouble you any further. Thanks a lot for your help.

Answer 12

Arb Rahim Badsa done. I want to fade out the old quote and then get the new quote. The solution is using jQuery methods like animate and fade-in etc which I dont understand. I heard that jQuery is useless now. No one uses it. That's why im trying to do it in vanilla js

Answer 13

Use jQuery, easy pizzy