用jQuery动画addClass / removeClass
我正在使用jQuery和jQuery-ui，并希望为各种对象设置各种属性的动画。 为了在此说明问题，我将其简化为一个div，当用户将鼠标悬停在该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时，没有动画“超排队”。 如果用户在动画播放过程中将鼠标移入/移出，则可以正确地缓解当前的“中途”状态和新的“目标”状态。 但是，由于定义了样式更改，因此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(){ …