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

Question

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

举例来说,如果我有一个a与CSS,使得它看起来像一个可点击的图像元素和给定的with,并height在CSS中,我如何安全地将动画width与height这个元素呢？

我是否需要为CSS类中的值设置动画？或者我需要设置一个新的CSS类的目标值width和height,让jQuery的动画从oldClass到newClass？

或者我可以简单地使用jQuery 的.width()和.height()方法,无论CSS中指定了什么值？

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

Answer 1

它将覆盖内联风格.

我现在将展示一个顶部版本,左边是动画,但你可以将它应用于几乎所有的CSS属性.

HTML

<span id="test">blablabla</span>

CSS

span{
    position:absolute;
    display:block;
    height:50px;
    width:50px;
}

jQuery的

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

这是你在'检查元素'时看到的

Answer 2

我知道已经很长时间了，但是无论如何它可能会帮助某人寻找答案。要支持较旧的浏览器时，依靠CSS3过渡属性可能会导致麻烦。

可以通过使用jQuery UI完全实现在两种状态（CSS类）之间进行动画处理所需的行为，该方法通过扩展switchClass（）方法来支持此功能。它还支持animate（）方法的所有好处，例如持续时间，缓动，回调等。

如官方文档所述：

类似于本机CSS过渡，jQuery UI的类动画提供了从一种状态到另一种状态的平滑过渡，同时允许您保留有关在CSS和JavaScript中更改哪些样式的所有详细信息。

您可以在这里阅读所有内容。

jQuery UI也可以编译为仅包含所需的内容，因此您可以通过排除不使用的功能来减小库的大小。在此处检查可用选项。

希望它对某人有所帮助！