Javascript jQuery是否在两个不同的CSS类之间设置动画？

我试图理解jQuery动画是如何工作的

例如，如果我有一个带有CSS的

a

元素，使它看起来像一个可点击的图像，并且在CSS中有一个带有

和
高度的
，我如何安全地设置该元素的
宽度和
高度的动画

我需要为CSS类中的值设置动画吗？或者我需要为
width
和
height
设置一个新的CSS类，并让jQuery从
oldClass
动画化为
newClass

或者我可以简单地使用jQuery的
.width（）
和
.height（）
方法，而不管CSS中指定了什么值

让我困惑的是：如果我用jQuery调整元素的宽度，这是否也会修改我的CSS，或者jQuery/JavaScript只是用其他东西覆盖CSS中的指定值？我的意思是：在使用jQuery编辑宽度之后，这个宽度是否也会成为CSS文件中的新值？我是否可以将该类应用于其他元素，它们将具有新的宽度？
它将覆盖内联样式

现在我将展示一个版本，它的左上角是动画的，但您可以将它应用于几乎所有的CSS属性

HTML

jquery

$('#test').animate({top:'100px',left:'50px'}, 500);


jQuery仅为数值css值设置动画。它不会在类之间设置动画（请参见下面的示例了解如何做到这一点）。函数的作用是：添加您作为参数指定的css，并将其作为内联css添加。它将始终覆盖样式表css。这很好，但有点混乱，很容易失控

但是，如果您想在类之间设置动画，那么使用css3转换属性对性能和清洁度都有好处。见示例：

HTML

CSS（这将设置宽度、高度和背景色的动画）。animate（）不会设置背景色的动画，因此这是一个额外的好处

.myTestAnimation {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear;
     transition: background-color 300ms linear, width 300ms linear, height 300ms linear;
    position: relative;
}
.myTestAnimation.animate {
    background-color: blue;
    width: 200px;
    height: 200px;
}

我知道这已经有很长一段时间了，但它可能会帮助人们寻找答案。当想要支持较旧的浏览器时，依赖CSS3转换属性可能会导致麻烦

通过使用jQuery UI，可以完全实现在两个状态（CSS类）之间设置动画所需的行为，jQuery UI通过扩展switchClass（）方法支持这一点。它还支持animate（）方法的所有额外功能，如持续时间、放松、回调等

正如官方文件所指出的那样：'

与本机CSS转换类似，jQuery UI的类动画
提供从一种状态到另一种状态的平稳过渡，同时允许
您需要在CSS和中保留有关更改哪些样式的所有详细信息
从JavaScript中删除

你可以阅读所有关于它的内容

jQueryUI也可以编译为只包含您需要的内容，因此您可以通过排除不使用的功能来减少库的大小。检查可用选项

希望它能帮助别人
 Javascript将内联CSS直接添加到DOM中的元素，这将覆盖样式表中设置的任何样式（使用if！important除外）。
$('#test').animate({top:'100px',left:'50px'}, 500);

<div class="myTestAnimation">Something to test</div>  

    jQuery(document).ready(function($) {
    $(".myTestAnimation").click(function() {
        $(this).toggleClass("animate");
    });
});

.myTestAnimation {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear;
     transition: background-color 300ms linear, width 300ms linear, height 300ms linear;
    position: relative;
}
.myTestAnimation.animate {
    background-color: blue;
    width: 200px;
    height: 200px;
}