动画addClass / removeClass与jquery [英] animating addClass/removeClass with jquery

问题描述

我使用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}） ; 
}）; 
  

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

$ b b

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


2. 当用户快速移动和移出div时，没有动画overqueue-


3. 如果用户在动画仍在播放时将鼠标移出/放开，则可以在当前的半途状态和新的目标状态之间正常移动。

但是由于样式更改在 animate（）中定义，我必须更改样式值，并不能只是指向我的样式表。

---

示例2

这是我目前最好的尝试使用 addClass（）和 removeClass 为动画工作你需要jQuery-ui）：

  //假设类'red'和'blue' b 
 $ b $（'＃someDiv'）
 .addClass（'blue'）
 .mouseover（function（）{
 $（this）.stop ）.removeAttr（'style'）。addClass（'red'，{duration：500}）; 
}）
 .mouseout（function（）{
 $（this）.stop true，false）.removeAttr（'style'）。removeClass（'red'，{duration：500}）; 
}）; 
  

这显示了我原始要求的属性1.和2.但是3不起作用。 / p>

我理解原因：

当动画 addClass c $ c>和 removeClass（） jQuery向元素添加一个临时样式，然后增加相应的值，直到它们达到提供的类的值，然后它实际上是添加/删除类。

因为这样，我必须删除样式属性，否则如果动画停止一半，样式属性将保留并永久覆盖

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

---

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

  $（'＃someDiv'）
 .mouseover （function（）{
 $（this）.stop（）。animate（getClassContent（'blue'），{duration：500}）; 
}）
 .mouseout（function（）{
 $（this）.stop（）。animate（getClassContent（'red'），{duration：500}）; 
 }）; 
  

其中 getClassContent 提供的类。关键点是，这样我不必保持我的样式定义，但可以将它们保存在我的样式表中的类中。

任何帮助非常感谢。

解决方案

因为你不担心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; 
} 
  

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

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.

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)

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)

---

Example 1

Let's take a look at the code I have with 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 moue 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.

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.

---

Example 2

Here is my current best attempt using addClass() and removeClass (note that for the animation to work you need 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.

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.

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.

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 getClassContent would 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.

Any help would be much appreciated.

解决方案

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/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

这篇关于动画addClass / removeClass与jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！