Jquery addClass/removeClass 动画不适用于背景？

Question

我正在尝试使用 Jquery 在更改类期间制作流畅的动画。

但它仅适用于文本颜色，不适用于背景。

您可以查看此内容以了解详细信息:( :

http://jsbin.com/upufut

Answer 1

这只是库版本的问题。

您的 jsbin 显示 jQuery 1.3.2 和 jQuery UI 1.7.2。

在此jsfiddle (对于 jq 1.3.2 和 jqui 1.7.2)，它不起作用。

在此other one ，两个库的最新版本，它可以工作。

jQuery 1.3.2 不仅仅是遗留的，你不应该再使用它，除非你没有选择，但恐怕你应该预料到一些(过度的)东西不起作用.

<小时/>

动画渐变

查看 jQuery UI 的文档，它们似乎不支持重载的 .animate() 到动画颜色的渐变 ( doc )。我想它只适用于纯色。

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 过渡在任何浏览器中都不处理渐变。不过有几种解决方法:

• css transition with linear gradient (第二个答案 - 不是已接受的答案 - 提出了一种解决方法，使用额外的元素并转换不透明度，适用于 Chrome 和 FF)
• Webkit support for gradient transitions

<小时/>

关于您提到的 YouTube 按钮的一句话。

对我来说，渐变不是动画的，因为它们使用 CSS 过渡。以下是我的测试方法:

1. 前往 YouTube 上的视频页面。
2. 按钮上的“检查元素”(在 Chrome 中)可打开控制台。选择<button>元素。
3. 查看 CSS 类 .yt-uix-button，更改 [-*-]transition: all 0.218s;到“1s”
4. 例如，将渐变的一种颜色更改为绿色。
5. 将鼠标悬停在按钮上，所有属性都会有动画效果，但渐变不会。

我的观点是，边框(等)的动画给人的印象是渐变是动画的，但事实并非如此。