CODEWITHSUNDEEP
jquerybackgroundjquery-animatefadegradient
César Couto
César Couto

Reputation: 21

Jquery Fade Gradient Background

i'm trying to look a way to fade gradient background. I've used the color plugin and i can fade single colors background, or JqueryUI that can highlight the background but i can't find a way to fade gradient backgrounds. Anyone have any idea how to do it ?

.bg1
    {
     background:#f39d1a;
     background:-moz-radial-gradient(50% 0% 164deg,circle closest-corner, #F39D1A, #D98C15);
     background:-webkit-gradient(radial, 50% 0, 800, 50% 0, 300, from(#DA8C16), to(#F39D1A));
    }
.bg2
    {
     background:#06327b;
     background:-moz-radial-gradient(50% 0% 164deg,circle closest-corner, #032358, #06327b);
     background:-webkit-gradient(radial, 50% 0, 800, 50% 0, 300, from(#032358), to(#06327b));
    }

Example... animate a div that has the bg1 element to the bg2 element.

Thanks

Upvotes: 2

Views: 1696

Answers (1)

Benny Johansson
Benny Johansson

Reputation: 771

Webkit is not there quite yet. But it looks like they have come pretty far.

https://bugs.webkit.org/show_bug.cgi?id=21725

Recently commited changelist of interest.

http://trac.webkit.org/changeset/102388

A workaround could be to use a gradient that fades from transparent to a color. Put that on top of a non-gradient element upon which you actually can perform a color animation. That said, I'm not sure that would satisfy your needs.

Upvotes: 1

Related Questions