使用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

既然你不担心IE,为什么不只是使用css过渡来提供动画和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;
}

Answer 2

另一种解决方案(但需要jQueryUI,正如Richard Neil Ilagan在评论中指出的那样): -

addClass,removeClass和toggleClass也接受第二个参数; 从一个州到另一个州的持续时间.

$(this).addClass('abc',1000);

见jsfiddle: - http://jsfiddle.net/6hvZT/1/

Answer 3

你可以使用jquery ui switchClass,Heres一个例子:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

或者看看这个jsfiddle.

Answer 4

你只需要jQuery UI effects-core(13KB)来启用添加的持续时间(就像它指出的Omar Tariq一样)

Answer 5

我一直在研究此问题，但希望输入和输出具有不同的转换率。

这就是我最终要做的事情：

//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秒钟内逐渐退回到正常状态。

这是一个小提琴