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

发布于 2024-12-20 12:07:11 字数 171 浏览 1 评论 0原文

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

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

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

http://jsbin.com/upufut

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

苯莒 2024-12-27 12:07:11

这只是库版本的问题。

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

在此jsfiddle(使用jq 1.3.2和jqui 1.7.2)中,它不工作。

在这个另一个中,两个库的最新版本,它可以工作

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


动画渐变

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

jQuery UI 效果核心扩展了动画功能,能够
也可以设置动画颜色。它被类转换大量使用
功能,并且它能够为以下属性设置颜色动画:

  • 背景颜色
  • 边框底部颜色
  • 左边框颜色
  • 边框颜色
  • 边框顶部颜色
  • 颜色
  • 轮廓颜色

使用以下组合之一:

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

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


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

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

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

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

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.

你丑哭了我 2024-12-27 12:07:11

我不明白你为什么使用javascript:$(this).removeClass("hoverf",1000),removeClass的第二个参数是做什么用的?我没有发现任何问题,它在 chrome 中工作得很好。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文