CSS类的Javascript动画？

可以用javascript动画替换类吗

让我考虑一下这个问题：

.class1 {background-color:blue;}  
.class2 {background-color:red;}  

是否有任何Javascript库可以简化这两个类之间的更改？这不会让用户的电脑爆炸吗

---

如果不是，那么实现这一目标的好方法是什么？服务器生成的Javascript文件？

如果可以使用jQuery，它具有动画功能，允许您从类1到类2进行动画制作

这里有一个链接

对于普通动画。按照另一个答案中的建议，在类之间使用jQuery UI制作动画。

是的，在加载后也可以这样做

请参见此处的演示：

下面是一个特定于CSS的示例

div{宽度：100px；高度：100px；}
.class1{背景色：蓝色；}
.class2{背景色：红色；}​
$（'div'）.addClass（'class2'，1000）；

您可以结合使用jQuery和jQueryUI

比如说，你有这样一段话：

<p id="notice" class="class1">This is something to highlight</p>

其中50显然是动画所需的时间。为此，您需要同时引用和库

另一种方法是使用jqueryanimate方法。基本上，您可以指定驱动动画的css、持续时间和回调

$('#clickme').click(function() {
  $('#notice').animate(
      {background-color: yellow}, 
      5000, 
      function() {
        $("#notice").removeClass("class1");
      });
});

---

没错，但您也需要jQuery UI。仅jQuery的

.animate（）

方法无法为类的替换设置动画。我不知道您的情况，但这是我个人“完全疯狂；避免”文件中保留的jQuery UI功能之一。这是一个功能，当它工作时就工作，但当它不工作时，就会变得奇怪。然而事实上它确实存在：-）@Pointy-同意。这个概念很好，但在实践中，如果我要使用它，它只会出现在最简单的情况下。将样式缓存在变量中可能更安全，并将其与

.animate（）

一起使用。我意识到这并不总是切实可行的（尤其是如果CSS不仅仅涉及背景色），但您也可以在

上分层

，只需

.fadeOut（）

悬停或其他事件。@peter-在某些情况下，这肯定是可能的：o） 这不是重点，真的，我确实希望有一个能够处理CSS类中的主要修改的系统。不过，我确实意识到，除了位置、大小或颜色之外，我可能永远都不需要制作任何动画。其他任何东西都会有点古怪，我不会感到非常惊讶。。。

$("#notice").addClass("class2", 50);

$('#clickme').click(function() {
  $('#notice').animate(
      {background-color: yellow}, 
      5000, 
      function() {
        $("#notice").removeClass("class1");
      });
});