i'm trying to make smooth animation during change class with Jquery.
But it works only with text-color, not background.
You can check this for detail :( :
0
Add a comment
|
2 Answers
This is simply a matter of version of the libraries.
Your jsbin shows jQuery 1.3.2 and jQuery UI 1.7.2.
In this jsfiddle (with jq 1.3.2 and jqui 1.7.2), it does not work.
In this other one, latest versions of both libraries, it works.
jQuery 1.3.2 is more thand legacy, you should not use it anymore, except if you don't have the choice, but then you should expect some (over-the-top) things not to work I'm afraid.
Animating gradients
Looking at the documentation from jQuery UI, they seem not to support gradient on the overloaded .animate() to animate colors (doc). I guess it just works with solid colors.
The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
- backgroundColor
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- color
- outlineColor
with one of the following combinations:
- hex (#FF0000)
- rgb (rgb(255,255,255))
- names ("black")
CSS transitions on the other hand does not handle gradients neither in any browser. There any several workarounds though:
- css transition with linear gradient (second answer - not the accepted one - proposes a workaround with an extra element and transitionning the opacity, works in Chrome & FF)
- Webkit support for gradient transitions
A word on YouTube's buttons you mention.
For me, the gradients are not animated as they use CSS transitions. Here is how I tested that:
- Go to a video page on youtube.
- "Inspect element" on a button (in chrome) to open the console. Select the
<button>element. - Looking at the CSS class .yt-uix-button, change the
[-*-]transition: all 0.218s;to "1s" - Change one of the colors of the gradient to Green for instance.
- Hover the button, all properties are animated, but not the gradient.
My opinion is that the animation of the border (etc) gives the impression the gradient is animated but it's not.
5 Comments
TomSawyer
sorry, it doesn't work. i need the gradient-background color change. you can see, it's doesn't smooth. you can see the Youtube button, when you hover it, it lighter (smoothly). this thing can change background color only, but can't change gradient background with CSS3. like my example
Didier Ghys
TomSawyer
you can see the Youtubue button / search box. it already done animation in button onmouseover, onblur, onfocus. i'll give it a try with your plugin. tks.
TomSawyer
very nice. tks for your help. that's webkit gradient background color trick lab.tylergaw.com/css-gradient-transition-sorta ~> animation worked with Google Chrome only, not firefox (exactly like youtube)
Didier Ghys
The second answer (not the accepted one) of the post css transition with linear gradient proposes a workaround with an extra element and transitionning the opacity. Works in Chrome & FF.
I don't understand why you use javascript:$(this).removeClass("hoverf",1000), what is the second parameter of removeClass for? And I don't find any problem, it just works fine in chrome.
1 Comment
TomSawyer
that is timing. you can see the second parameter witj jquery UI docs.jquery.com/UI/Effects/addClass