使用 jQuery 为 addClass/removeClass 添加动画效果

我正在使用jQuery和jQuery-ui，并希望在各种对象上对各种属性进行动画处理。

为了解释这里的问题，我将其简化为一个div，当用户将鼠标悬停在它上面时，它从蓝色变为红色。

我能够在使用时获得我想要的行为，但是当这样做时，我正在制作动画的样式必须在动画代码中，因此与我的样式表分开。（请参阅示例 1animate())

另一种方法是使用，但我无法重新创建我可以得到的确切行为。（请参阅示例 2addClass()removeClass()animate())

示例 1

让我们来看看我的代码：animate()

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

它显示了我正在寻找的所有行为：

1. 在红色和蓝色之间平滑地制作动画。
2. 当用户快速将鼠标移入和移出 div 时，没有动画“过排队”。
3. 如果用户在动画仍在播放时将鼠标移出/移入，则会在当前“中途”状态和新的“目标”状态之间正确放松。

但是，由于样式更改是在中定义的，因此我必须更改那里的样式值，并且不能仅将其指向我的样式表。这种定义样式的“碎片化”是真正困扰我的事情。animate()

示例 2

这是我目前使用和（请注意，要使动画正常工作，您需要jQuery-ui）进行当前的最佳尝试）：addClass()removeClass

//assume classes 'red' and 'blue' are defined

$('#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});
  });

这显示了两个属性 1。和 2.我的原始要求，但是3不起作用。

我理解其中的原因：

当动画和jQuery向元素添加临时样式时，然后递增适当的值，直到它们达到所提供类的值，然后它才会实际添加/删除该类。addClass()removeClass()

因此，我必须删除 style 属性，否则，如果动画在中途停止，样式属性将保留并永久覆盖任何类值，因为标记中的样式属性比类样式更重要。

但是，当动画完成一半时，它尚未添加新类，因此使用此解决方案，当用户在动画完成之前移动鼠标时，颜色将跳转到以前的颜色。

理想情况下，我想要的是能够做这样的事情：

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

其中将仅返回所提供类的内容。关键的一点是，通过这种方式，我不必到处保留我的样式定义，而是可以将它们保存在样式表中的类中。getClassContent