用jQueryanimationaddClass / removeClass
我正在使用jQuery和jQuery-ui，并想animation各种对象的各种属性。
为了解释这个问题，我把它简化为一个div，当用户将鼠标移到它上面时，它会从蓝色变成红色。
我可以在使用animate()时候得到我想要的行为，但是当我这样做时，animation的样式必须在animation代码中，所以与我的样式表是分开的。 （见例1 ）
另一种方法是使用addClass()和removeClass()但是我还没有能够重新创build我可以用animate()获得的确切行为。 （见例2 ）
例1
我们来看看我用animate()得到的代码：
$('#someDiv') .mouseover(function(){ $(this).stop().animate( {backgroundColor:'blue'}, {duration:500}); }) .mouseout(function(){ $(this).stop().animate( {backgroundColor:'red'}, {duration:500}); });
它显示我正在寻找的所有行为：
- animation之间红色和蓝色之间stream畅。
- 当用户将鼠标快速移入和移出div时，没有animation“过度排队”。
- 如果用户在animation播放过程中将鼠标移出/放入，则会在当前的“中途”状态和新的“目标”状态之间正常缓解。
但是由于样式变化是在animate()中定义的，所以我必须在那里更改样式值，而不能仅仅指向样式表。 风格定义的这种“碎片化”是真正困扰我的事情。
例2
这是我目前使用addClass()和removeClass最佳尝试（请注意，为了使animation起作用，您需要使用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不起作用。
我明白这个原因：
当animationaddClass()和removeClass() jQuery为元素添加一个临时样式，然后递增适当的值，直到他们到达提供的类的值，然后才实际添加/删除类。
因此，我必须删除样式属性，否则如果animation在中途停止，样式属性将保留并永久覆盖任何类值，因为样式中的样式属性比类样式具有更高的重要性。
但是当animation中途完成时，它还没有添加新的类，所以在这个解决scheme中，当用户在animation完成之前移动鼠标时，颜色跳转到以前的颜色。
我想要的理想是能够做到这样的事情：
$('#someDiv') .mouseover(function(){ $(this).stop().animate( getClassContent('blue'), {duration:500}); }) .mouseout(function(){ $(this).stop().animate( getClassContent('red'), {duration:500}); });
getClassContent只会返回提供的类的内容。 关键是，这样我就不必将我的样式定义保留在所有的位置，但可以保留在我的样式表的类中。
既然你不担心IE，为什么不使用CSS转换来提供animation和jQuery来改变类。 现场示例： http : //jsfiddle.net/tw16/JfK6N/
#someDiv{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
另一个解决scheme（但它需要jQueryUI由Richard Neil Ilagan在评论中指出）： –
addClass，removeClass和toggleClass也接受第二个参数; 从一个状态到另一个状态的持续时间。
$(this).addClass('abc',1000);
看到jsfiddle： – http://jsfiddle.net/6hvZT/1/
你可以使用jquery ui的switchClass ，Heres一个例子：
$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );
或者看到这个jsfiddle 。
您只需要jQuery UI效果核心 （13KB），以启用添加的持续时间（就像它指出的Omar Tariq一样）
我正在研究这个问题，但想要有一个不同的进出的转换率。
这就是我最终做的事情：
//css .addedClass { background: #5eb4fc; } // js function setParentTransition(id, prop, delay, style, callback) { $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style}); $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style}); $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style}); $(id).css({'transition' : prop + ' ' + delay + ' ' + style}); callback(); } setParentTransition(id, 'background', '0s', 'ease', function() { $('#elementID').addClass('addedClass'); }); setTimeout(function() { setParentTransition(id, 'background', '2s', 'ease', function() { $('#elementID').removeClass('addedClass'); }); });
这会立即将背景颜色变成＃5eb4fc，然后在2秒内缓慢恢复正常。
这是一个小提琴
虽然，这个问题是相当古老的，我添加信息不存在于其他答案。
一旦事件完成，OP将使用stop（）来停止当前animation。 但是，使用正确的参数组合function应该有所帮助。 例如。 停止（true，true）或停止（true，false），因为这会很好地影响排队的animation。
以下链接说明了一个演示，其中显示了stop（）可用的不同参数以及它们与finish（）的不同之处。
尽pipeOP没有使用JqueryUI的问题，但是对于可能遇到类似场景但不能使用JqueryUI /需要支持IE7和8的其他用户来说也是如此。
