Home/ Questions/Q 6914679
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:22:42+00:00

i’m trying to make smooth animation during change class with Jquery. But it works

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0