使用jQuery动画addClass / removeClass

Question

我正在使用jQuery和jQuery-ui，并希望动画各种对象的各种属性。

为了解释这里的问题，我把它简化为一个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});
  });

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

1. 红色和蓝色之间平滑动画。

2. 当用户快速将鼠标移入和移出div时，没有动画“过度”。

3. 如果用户在动画仍在播放时将鼠标移出/移入，则在当前“中途”状态和新“目标”状态之间正确缓解。

但是由于样式更改是定义的，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属性，否则如果动画中途停止，则样式属性将保留并永久覆盖任何类值，因为标记中的样式属性比类样式具有更高的重要性。

但是，当动画完成一半时，它还没有添加新类，因此使用此解决方案，当用户在动画完成之前移动鼠标时，颜色会跳转到上一个颜色。

---

我理想的是能够做到这样的事情：

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

哪里getClassContent只返回提供的类的内容。关键在于，这样我就不必将样式定义保留在所有位置，而是可以将它们保存在样式表中的类中。

Answer 1

我正在研究这个问题，但希望进出的转换率不同。这就是我最终做的事情：//css.addedClass {     background: #5eb4fc;}// jsfunction 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秒内慢慢变回正常状态。这是一个小提琴