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

为了解释这个问题，我将它简化为一个div，当用户将鼠标放在上面时，它会从蓝色变成红色。

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

另一种方法是使用addClass()和removeClass()，但我还不能重新创建我可以用animate()得到的确切行为。(见例2)

示例1

让我们看看我使用animate()的代码:

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

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

动画在红色和蓝色之间平滑。 当用户快速移动鼠标进出div时，没有动画'overqueue-ing'。 如果用户在动画仍在播放时将鼠标移出/移进，它将在当前的“中途”状态和新的“目标”状态之间正确地缓解。

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

示例2

这是我目前使用addClass()和removeClass的最佳尝试(注意，为了使动画工作，你需要jQuery-ui):

//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不工作。

我理解其中的原因:

当动画addClass()和removeClass()时，jQuery为元素添加一个临时样式，然后将适当的值递增，直到它们达到所提供的类的值，然后才真正添加/删除类。

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

然而，当动画完成一半的时候，它还没有添加新的类，所以有了这个解决方案，当用户在动画完成之前移动鼠标时，颜色就会跳到之前的颜色。

理想情况下，我想做的事情是这样的:

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

其中getClassContent只返回所提供类的内容。关键的一点是，这样我就不必把样式定义保存在各处，而是可以将它们保存在样式表中的类中。