I am using jQuery and jQuery-ui and want to animate various attributes on various objects.(我正在使用jQuery和jQuery-ui，并希望动画各种对象的各种属性。)
For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over it.(为了解释这里的问题，我把它简化为一个div，当用户将鼠标悬停在它上面时，它会从蓝色变为红色。)
I am able to get the behavior I want when using animate() , however when doing so the styles I am animating have to be in the animation code and so are separate from my style sheet.(我可以在使用animate()时获得我想要的行为，但是当这样做时，我动画的样式必须在动画代码中，因此与我的样式表分开。)
(see example 1 )(（见例1 ）)
An alternative is using addClass() and removeClass() but I have not been able to re-create the exact behavior that I can get with animate() .(另一种方法是使用addClass()和removeClass()但我无法重新创建使用animate()可以获得的确切行为。)
(see example 2 )(（见例2 ）)
Example 1(例1)
Let's take a look at the code I have with animate() :(让我们看看我对animate()的代码：)
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
})
.mouseout(function(){
$(this).stop().animate( {backgroundColor:'red'}, {duration:500});
});
it displays all the behaviors I am looking for:(它显示我正在寻找的所有行为：)
- Animates smoothly between red and blue.(红色和蓝色之间平滑动画。)
- No animation 'overqueue-ing' when the user moves their mouse quickly in and out of the div.(当用户快速将鼠标移入和移出div时，没有动画“过度”。)
- If the user moves their mouse out/in while the animation is still playing it eases correctly between the current 'halfway' state and the new 'goal' state.(如果用户在动画仍在播放时将鼠标移出/移入，则在当前“中途”状态和新“目标”状态之间正确缓解。)
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.(但是由于样式更改是在animate()中定义的，我必须更改那里的样式值，而不能仅仅指向我的样式表。)
This 'fragmenting' of where styles are defined is something that really bothers me.(定义样式的“碎片”真的让我困扰。)
Example 2(例2)
Here is my current best attempt using addClass() and removeClass (note that for the animation to work you need jQuery-ui):(这是我目前使用addClass()和removeClass最佳尝试（请注意，要使动画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});
});
This exhibits both property 1. and 2. of my original requirements, however 3 does not work.(这显示了我原始要求的属性1.和2.但是3不起作用。)
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.(当动画addClass()和removeClass() jQuery会为元素添加一个临时样式，然后递增适当的值，直到它们达到提供的类的值，然后才会实际添加/删除该类。)
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.(因此，我必须删除style属性，否则如果动画中途停止，则样式属性将保留并永久覆盖任何类值，因为标记中的样式属性比类样式具有更高的重要性。)
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.(getClassContent只返回提供的类的内容。)
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.(关键在于，这样我就不必将样式定义保留在所有位置，而是可以将它们保存在样式表中的类中。)
ask by Johannes translate from so
