如何使用 jQuery 平滑地对类更改进行动画处理，避免动画排队和样式冲突？

使用 jQuery 进行动画类操作

问题：

在 jQuery 中，使用 addClass() 和 removeClass()，如何你能像你一样顺利地动画化班级变化吗animate()?

示例 1：使用 animate()

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

此方法满足所有所需标准：平滑过渡、无动画排队和正确的缓动。但是，样式更改必须在动画中定义，并将其与样式表分开。

示例 2：使用 addClass() 和 removeClass()

$('#someDiv').addClass('blue').mouseover(function() {
  // Remove inline styles before applying 'red' class with animation
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  // Same for removing 'red' class
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

这种方法部分满足标准，表现出平滑过渡并避免排队。然而，由于 jQuery 在类动画期间临时添加样式，鼠标过早移动时颜色会跳跃。

解决方案：

在类中合并样式的同时实现所需的行为，考虑使用 CSS 过渡和 jQuery 来操作类更改。

#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').addClass('blue').mouseover(function() {
  $(this).addClass('red');
}).mouseout(function() {
  $(this).removeClass('red');
});

以上是如何使用 jQuery 平滑地对类更改进行动画处理，避免动画排队和样式冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！