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

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

在红色和蓝色之间平滑动画。
当用户快速将鼠标移入和移出div时，没有动画“过度加载”。
如果用户在动画播放时将鼠标移出/放入，则可以在当前“中途”状态和新“目标”状态之间正确缓解。

但是由于样式更改是在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属性，否则如果动画中途停止，则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＆＃39; s switchClass，以下是一个例子：

$( "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秒内慢慢淡化回正常。

这里是fiddle

Answer 6

虽然问题相当陈旧，但我正在添加其他答案中没有的信息。

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

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

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

尽管OP在使用JqueryUI时没有问题，但这适用于可能遇到类似场景但不能使用JqueryUI /需要支持IE7和8的其他用户。

使用jQuery动画addClass / removeClass

示例1

示例2

6 个答案: