我正在使用 jQuery 和 jQuery-ui 并希望为各种对象的各种属性设置动画。
为了在这里解释这个问题，我将它简化为一个 div，当用户将鼠标悬停在它上面时，它会从蓝色变为红色。
我能够在使用 时获得我想要的行为animate()，但是这样做时，我正在制作动画的样式必须在动画代码中，因此与我的样式表分开。（见例1）
另一种方法是使用addClass()andremoveClass()但我无法重新创建我可以使用animate(). （见例2）
示例 1
让我们来看看我的代码animate()：
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
})
.mouseout(function(){
$(this).stop().animate( {backgroundColor:'red'}, {duration:500});
});
它显示了我正在寻找的所有行为：
- 在红色和蓝色之间平滑地动画。
- 当用户将鼠标快速移入和移出 div 时，没有动画“过度排队”。
- 如果用户在动画仍在播放时移出/移入鼠标，它会在当前的“中途”状态和新的“目标”状态之间正确缓和。
但是由于样式更改是在 中定义的，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 向元素添加一个临时样式，然后增加适当的值，直到它们达到提供的类的值，然后才真正添加/删除类。
因此，我必须删除 style 属性，否则如果动画在中途停止，则 style 属性将保留并永久覆盖任何类值，因为标签中的样式属性比类样式更重要。
但是，当动画完成一半时，它还没有添加新类，因此使用此解决方案，当用户在动画完成之前移动鼠标时，颜色会跳转到先前的颜色。
理想情况下，我想要的是能够做这样的事情：
$('#someDiv')
.mouseover(function(){
$(this).stop().animate( getClassContent('blue'), {duration:500});
})
.mouseout(function(){
$(this).stop().animate( getClassContent('red'), {duration:500});
});
哪里getClassContent只返回提供的类的内容。关键是这样我就不必到处保留样式定义，而是可以将它们保留在样式表的类中。