用jQuery动画addClass / removeClass

我正在使用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});
  });

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

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

But since the style changes are defined in animate() I have to change the style values there, and can't just have it point to my stylesheet. This 'fragmenting' of where styles are defined is something that really bothers me.

---

Example 2

Here is my current best attempt using addClass() and removeClass (note that for the animation to work you need 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});
  });

This exhibits both property 1. and 2. of my original requirements, however 3 does not work.

I understand the reason for this:

When animating addClass() and removeClass() jQuery adds a temporary style to the element, and then increments the appropriate values until they reach the values of the provided class, and only then does it actually add/remove the class.

Because of this I have to remove the style attribute, otherwise if the animation is stopped halfway the style attribute would remain and would permanently overwrite any class values, since style attributes in a tag have higher importance than class styles.

However when the animation is halfway done it hasn't yet added the new class, and so with this solution the color jumps to the previous color when the user moves their mouse before the animation is completed.

---

What I want ideally is to be able to do something like this:

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

Where getClassContent would just return the contents of the provided class. The key point is that this way I don't have to keep my style definitions all over the place, but can keep them in classes in my stylesheet.