使用 jQuery 动画 addClass/removeClass

Question

我正在使用

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

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

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 向元素添加一个临时样式，然后递增适当的值，直到它们达到提供的类的值，然后才添加/删除该类。

因此，我必须删除样式属性，否则，如果动画中途停止，样式属性将保留并永久覆盖任何类值，因为标签中的样式属性比类样式具有更高的重要性。

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

---

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

$('#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

，这是一个例子：

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

或者看看这个jsfiddle。

Answer 4

您只需要 jQuery UI 效果核心 (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 秒内慢慢淡出恢复正常。

这是一个小提琴

Answer 6

虽然这个问题相当老了，但我添加了其他答案中没有的信息。

事件完成后，OP 使用 stop() 停止当前动画。但是，在函数中使用正确的参数组合应该会有所帮助。例如。 stop(true,true) 或 stop(true,false) 因为这会很好地影响排队的动画。

以下链接演示了一个演示，显示了 stop() 可用的不同参数以及它们与 finish() 的不同之处。

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

虽然OP使用JqueryUI没有问题，但这适用于可能遇到类似场景但无法使用JqueryUI/也需要支持IE7和8的其他用户。