Jquery addClass/removeClass 动画不适用于背景?
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 :( :
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这只是库版本的问题。
您的 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)。我想它只适用于纯色。
另一方面,CSS 过渡不会在任何浏览器中都不处理渐变。不过,还有几种解决方法:
关于您提到的 YouTube 按钮的一句话。
对我来说,渐变不是动画的,因为它们使用 CSS 过渡。以下是我的测试方法:
[-*-]transition: all 0.218s;
更改为“1s”我的观点是,边框的动画(等)给人的印象是渐变是动画的,但事实并非如此。
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.
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:
<button>
element.[-*-]transition: all 0.218s;
to "1s"My opinion is that the animation of the border (etc) gives the impression the gradient is animated but it's not.
我不明白你为什么使用
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.