Javascript 使用 jQuery 动画 addClass/removeClass

animating addClass/removeClass with jQuery

提问by Johannes

I am using jQuery and jQuery-ui and want to animate various attributes on various objects.

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

For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over it.

为了在这里解释这个问题，我将它简化为一个 div，当用户将鼠标悬停在它上面时，它会从蓝色变为红色。

I am able to get the behavior I want when using animate(), however when doing so the styles I am animating have to be in the animation code and so are separate from my style sheet. (see example 1)

我能够在使用时获得我想要的行为animate()，但是这样做时，我正在制作动画的样式必须在动画代码中，因此与我的样式表分开。（见例1）

An alternative is using addClass()and removeClass()but I have not been able to re-create the exact behavior that I can get with animate(). (see example 2)

另一种方法是使用addClass()andremoveClass()但我无法重新创建我可以使用animate(). （见例2）

---

---

Example 1

示例 1

Let's take a look at the code I have with animate():

让我们来看看我的代码animate()：

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

it displays all the behaviors I am looking for:

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

1. Animates smoothly between red and blue.
2. No animation 'overqueue-ing' when the user moves their mouse quickly in and out of the div.
3. If the user moves their mouse out/in while the animation is still playing it eases correctly between the current 'halfway' state and the new 'goal' state.

1. 在红色和蓝色之间平滑地动画。
2. 当用户将鼠标快速移入和移出 div 时，没有动画“过度排队”。
3. 如果用户在动画仍在播放时移出/移入鼠标，它会在当前的“中途”状态和新的“目标”状态之间正确缓和。

But since the style changes are defined in animate()I have to change the style values there, and can't just have it point to my stylesheet. This 'fragmenting' of where styles are defined is something that really bothers me.

但是由于样式更改是在 中定义的，animate()我必须在那里更改样式值，并且不能让它指向我的样式表。这种定义样式的“碎片化”真的让我感到困扰。

---

---

Example 2

示例 2

Here is my current best attempt using addClass()and removeClass(note that for the animation to work you need jQuery-ui):

这是我目前使用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});
  });

This exhibits both property 1. and 2. of my original requirements, however 3 does not work.

这展示了我最初要求的属性 1. 和 2.，但是 3 不起作用。

I understand the reason for this:

我理解这样做的原因：

When animating addClass()and removeClass()jQuery adds a temporary style to the element, and then increments the appropriate values until they reach the values of the provided class, and only then does it actually add/remove the class.

当动画addClass()和removeClass()jQuery 向元素添加临时样式时，然后增加适当的值直到它们达到提供的类的值，然后才真正添加/删除类。

Because of this I have to remove the style attribute, otherwise if the animation is stopped halfway the style attribute would remain and would permanently overwrite any class values, since style attributes in a tag have higher importance than class styles.

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

However when the animation is halfway done it hasn't yet added the new class, and so with this solution the color jumps to the previous color when the user moves their mouse before the animation is completed.

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

---

---

What I want ideally is to be able to do something like this:

理想情况下，我想要的是能够做这样的事情：

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

Where getClassContentwould just return the contents of the provided class. The key point is that this way I don't have to keep my style definitions all over the place, but can keep them in classes in my stylesheet.

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

回答by tw16

Since you are not worried about IE, why not just use css transitions to provide the animation and jQuery to change the classes. Live example: http://jsfiddle.net/tw16/JfK6N/

既然你不担心 IE，为什么不直接使用 css transitions 来提供动画和 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;
}

回答by Omar Tariq

Another solution (but it requires jQueryUI as pointed out by Richard Neil Ilagan in comments) :-

另一个解决方案（但它需要 jQueryUI，正如 Richard Neil Ilagan 在评论中指出的那样）：-

addClass, removeClass and toggleClass also accepts a second argument; the time duration to go from one state to the other.

addClass、removeClass 和 toggleClass 也接受第二个参数；从一种状态到另一种状态的持续时间。

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

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

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

回答by by0

You could use jquery ui's switchClass, Heres an example:

你可以使用 jquery ui's switchClass，这是一个例子：

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

Or see this jsfiddle.

或者看这个jsfiddle。

回答by Patrick

You just need the jQuery UI effects-core(13KB), to enable the duration of the adding (just like Omar Tariq it pointed out)

您只需要jQuery UI 效果核心(13KB)，即可启用添加的持续时间（就像 Omar Tariq 指出的那样）

回答by Tj Gienger

I was looking into this but wanted to have a different transition rate for in and out.

我正在研究这个，但希望有一个不同的进出转换率。

This is what I ended up doing:

这就是我最终做的：

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

This instantly turns the background color to #5eb4fc and then slowly fades back to normal over 2 seconds.

这会立即将背景颜色变为 #5eb4fc，然后在 2 秒内慢慢恢复正常。

Here's a fiddle

这是一把小提琴

回答by Anurag

Although, the question is fairly old, I'm adding info not present in other answers.

虽然这个问题已经很老了，但我正在添加其他答案中没有的信息。

The OP is using stop() to stop the current animation as soon as the event completes. However, using the right mix of parameters with the function should help. eg. stop(true,true) or stop(true,false) as this affects the queued animations well.

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

The following link illustrates a demo that shows the different parameters available with stop() and how they differ from finish().

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

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

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

Although the OP had no issues using JqueryUI, this is for other users who may come across similar scenarios but cannot use JqueryUI/need to support IE7 and 8 too.

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