As outlined in the jQuery documentation
The recommended approach for animating properties is to target a single numeric value, with exceptions noted below; most non-numeric properties cannot be animated through basic jQuery functions (For instance, width, height, or left can be animated, but background-color requires the use of the jQuery.Color plugin). Property values are considered as pixel units unless specified otherwise. The units em and % can be used where applicable.
background-color accepts a color name (string), rgb() value, rgba() value, or hex value. It is not numerical.
My suggestion would be to utilize CSS3 animations combined with keyframes. Below is an example:
#my-div {
background-color: #000;
height: 100px;
width: 100px;
}
#my-div:hover {
animation-name: changeColor;
animation-duration: 0.4s;
}
@keyframes changeColor {
from { background-color: #000; }
to { background-color: #f5f5f5; }
}
<div id="my-div"></div>
Create a new animation using the @keyframes syntax. Define properties for each step of the animation within the block.
- Initial Step: Indicated by
from or 0%
- Final Step: Represented by
to or 100%
For each step, multiple CSS rules separated by semicolons can be declared.
After setting up the animation rule, it needs to be applied. Utilize the :hover pseudo-selector to detect when the mouse interacts with an element.
Two properties need to be configured here. The animation-name property should match the created rule's name. The animation-duration specifies the duration of the animation, such as 0.4 seconds in this case.
Alternatively, these properties can be condensed into the shorthand animation property.
animation: changeColor 0.4s