0

I have a div with onClick (colorRefresh) and the script works fine but I would like to know if I could fade it in.

 function colorRefresh()
{ body[0].style.backgroundImage = `linear-gradient(to right, rgb(${colorOne[0]},${colorOne[1]},${colorOne[2]}),rgb(${colorTwo[0]},${colorTwo[1]},${colorTwo[2]})).fadeIn()`;
}

I tried to use fadeIn() but nothing happens. How do I go about doing this?

Laney Williams
  • 573
  • 3
  • 13
  • 34
  • jQueryUI can also animate colors. Or you write your own "fade" function for colors (-> [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) – Andreas May 28 '20 at 15:14
  • Thanks but it's still not working: `body[0].style.backgroundImage.animate('linear-gradient(to right, rgb(${colorOne[0]},${colorOne[1]},${colorOne[2]}),rgb(${colorTwo[0]},${colorTwo[1]},${colorTwo[2]}))');` I guess I'm doing something wrong – Laney Williams May 28 '20 at 15:25
  • Does this answer your question? [CSS3 background-color change linear infinite animation](https://stackoverflow.com/questions/42074733/css3-body-background-color-change-linear-infinite-animation) – Triby May 28 '20 at 15:29
  • @Triby I do want to animate it, but with Javascript if possible – Laney Williams May 28 '20 at 15:30
  • Try this: https://stackoverflow.com/questions/10963059/jquery-animate-div-background-color-gradient – Triby May 28 '20 at 15:37
  • How would I do something more like a transition? – Laney Williams May 28 '20 at 15:41

0 Answers0