jQuery 和 CSS 过渡如何平滑地动画 DOM 元素颜色变化？

用于平滑 DOM 元素颜色变化的 jQuery 动画 CSS 类转换

简介
在本文中，我们解决了 CSS 动画的挑战使用 jQuery 更改各种对象的属性，同时保持对样式表的控制

示例 1：使用专用 CSS 属性进行动画
使用 animate()，我们可以直接在动画代码中操作 CSS 属性：

$('#someDiv').mouseover(function() {
  $(this).stop().animate({ backgroundColor: 'blue' }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundColor: 'red' }, { duration: 500 });
});

然而，这种方法将样式定义与样式表分开，这较少

示例 2：AddClass/RemoveClass 替代方案
要利用样式表类，我们可以使用 addClass() 和 removeClass()，如下所示：

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

虽然某些动画按预期工作，但其他动画由于在运行期间应用的临时样式而受到干扰动画。

理想的解决方案
我们渴望在一个地方（样式表）维护 CSS 类定义，同时利用 jQuery 进行动画类转换。

建议的解决方案
为了实现这一目标，我们建议结合使用 CSS 转换和 jQuery 的类操作功能。查看此现场示例进行演示：

<div>
<pre class="brush:php;toolbar:false">#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').mouseover(function() {
  $(this).addClass('blue');
}).mouseout(function() {
  $(this).removeClass('blue');
});