用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}); }); 

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

  1. animation之间红色和蓝色之间stream畅。
  2. 当用户将鼠标快速移入和移出div时,没有animation“过度排队”。
  3. 如果用户在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); 

看到j​​sfiddle: – 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()的不同之处。

http://api.jquery.com/finish/

尽pipeOP没有使用JqueryUI的问题,但是对于可能遇到类似场景但不能使用JqueryUI /需要支持IE7和8的其他用户来说也是如此。