jQuery Animate无法使用background-color属性 [英] jQuery Animate not working on background-color property

问题描述

我在玩jQuery .animate()函数，最终尝试根据用户滚动的像素数来更改div之一的background-color.令我惊讶的是，它没有用.我尝试使用.css()函数代替，并且效果很好.请参考底部的jsFiddle链接.

I was playing around with the jQuery .animate() function, and ended up trying to change the background-color of one of the divs depending on the number of pixels scrolled by the user. To my surprise, it did not work. I tried using the .css() function instead, and it worked well. Please refer the jsFiddle link at the bottom.

有人可以向我解释为什么会这样吗?

Could somebody explain to me why this is happening?

jsFiddle链接: https://jsfiddle.net/ag_dhruv/cb2sypmu/

The jsFiddle link : https://jsfiddle.net/ag_dhruv/cb2sypmu/

推荐答案

按照 jQuery API文档 :

.animate()方法允许我们在任何 数字CSS属性 上创建动画效果.

The .animate() method allows us to create animation effects on any numeric CSS property.

动画属性和值

所有动画属性均应动画化为单个数值，除非另有说明；否则，除非特别说明.大多数非数字属性不能使用基本的jQuery功能设置动画(例如，width，height或left可以设置 设置动画，但background-color不能设置 ，除非使用了jQuery.Color插件)

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)

^{重点是我的}

背景色不是数字属性，因此无法使用.animate()对其进行动画处理.

Background Color is not a numeric property and so it cannot be animated using .animate().

这篇关于jQuery Animate无法使用background-color属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！