jQuery可以在两个不同的CSS类之间进行动画吗？

Question

我正在尝试理解jQuery动画的工作原理。

例如，如果我有一个元素，它的CSS使其看起来像可点击的图像，并且在CSS中给定了width和height，那么如何安全地动画化此元素的width和height？

我需要动画化CSS类中的值吗？还是我需要设置一个新的CSS类，其中包含width和height的目标值，并让jQuery从oldClass动画到newClass？

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

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

- openfrog

---

Javascript会直接向DOM元素添加内联CSS，这将覆盖任何在样式表中设置的样式（除非使用!important）。 - adeneo

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);

演示

- raam86

Answer 2

我知道已经过了很久，但它仍然可以帮助寻找答案的人。依赖CSS3转换属性可能会在想要支持旧浏览器时导致问题。

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

正如官方文档所述：

与本机CSS转换类似，jQuery UI 的类动画提供了从一个状态到另一个状态的平稳过渡，同时允许您保留有关要在CSS中更改哪些样式以及不需要在JavaScript中执行的详细信息。

您可以 在这里 阅读有关它的所有信息。

jQuery UI 也可以编译为仅包括您需要的内容，这样您就可以通过排除不需要使用的功能来减少库的大小。检查可用选项 在这里。

希望能帮助到某人！

- user3885269

Answer 3

jQuery动画仅能在数字CSS值之间进行动画处理。它不会在类之间进行动画处理（请参见下面的示例以了解如何执行此操作）。.animate()函数将您提供的CSS作为参数添加并将其添加为内联CSS。它将始终覆盖样式表CSS。这是可以接受的，但有点混乱，并且很容易失控。

然而，如果您想在类之间进行动画处理，则使用CSS3过渡属性可以提高性能并使代码更加简洁。请参见以下示例：

HTML

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

JQuery （也可以使用原生 JavaScript）。只需切换类之间的状态，这样您就不会在 CSS 中包含任何样式信息。

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

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;
}

- Jesse Kinsman