3

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 :( :

http://jsbin.com/upufut

TomSawyer
  • 3,711
  • 6
  • 44
  • 79

2 Answers2

3

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:

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:

  1. Go to a video page on youtube.
  2. "Inspect element" on a button (in chrome) to open the console. Select the <button> element.
  3. Looking at the CSS class .yt-uix-button, change the [-*-]transition: all 0.218s; to "1s"
  4. Change one of the colors of the gradient to Green for instance.
  5. 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.

Community
  • 1
  • 1
Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
  • 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 – TomSawyer Dec 07 '11 at 17:56
  • In my knowledge, jquery ui does not support animating gradients ([doc](http://jqueryui.com/demos/animate/)), and CSS3 animations of gradients are not yet supported in browsers. Found this [plugin](http://www.norimek.com/blog/post/2011/08/27/jQuery-Linear-Gradient-Effect-Plug-In-Using-CSS3-Background-Image-Linear-Gradient-Value.aspx) though that might be useful for you. – Didier Ghys Dec 07 '11 at 23:37
  • 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 Dec 08 '11 at 06:53
  • very nice. tks for your help. that's webkit gradient background color trick http://lab.tylergaw.com/css-gradient-transition-sorta/ ~> animation worked with Google Chrome only, not firefox (exactly like youtube) – TomSawyer Dec 08 '11 at 12:59
  • The second answer (not the accepted one) of the post [css transition with linear gradient](http://stackoverflow.com/questions/7363141/css-transition-with-linear-gradient) proposes a workaround with an extra element and transitionning the opacity. Works in Chrome & FF. – Didier Ghys Dec 08 '11 at 13:13
0

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.

zuo
  • 1,061
  • 1
  • 12
  • 27
  • that is timing. you can see the second parameter witj jquery UI http://docs.jquery.com/UI/Effects/addClass – TomSawyer Dec 07 '11 at 14:55