Jquery addClass / removeClass 动画不适用于 Background ？

Question

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

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

您可以查看此详细信息:( :

http://jsbin.com/upufut

Answer 1

不明白你为什么用javascript:$(this).removeClass("hoverf",1000)，removeClass的第二个参数是干什么用的？而且我没有发现任何问题，它在 chrome 中运行良好。

Answer 2

这只是库的版本问题。

您的 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)。我猜它只适用于纯色。

jQuery UI 效果核心扩展了动画功能，使其能够 动画颜色也是如此。它被类转换大量使用 功能，它能够为以下属性设置颜色动画：

• 背景颜色
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• 颜色
• 轮廓颜色

具有以下组合之一：

• 十六进制 (#FF0000)
• rgb (rgb(255,255,255))
• 名字（“黑色”）

另一方面，CSS 过渡在任何浏览器中都不处理渐变。不过有几种解决方法：

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

---

您提到的 YouTube 按钮上的一句话。

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

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

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