jQuery 是否在两个不同的 CSS 类之间进行动画处理？答案

【问题标题】：Does jQuery animate between two different CSS classes?jQuery 是否在两个不同的 CSS 类之间进行动画处理？
【发布时间】：2013-06-13 10:18:03
【问题描述】：

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

例如，如果我有一个带有 CSS 的 a 元素，使它看起来像一个可点击的图像，并且在 CSS 中给定了 with 和 height，我将如何安全地为 width 和 height 设置动画这个元素？

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

或者我可以简单地使用 jQuery 的 .width() 和 .height() 方法，而不管 CSS 中指定了哪些值？

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

【问题讨论】：

Javascript 直接将内联 CSS 添加到 DOM 中的元素中，这会覆盖样式表中设置的任何样式（如果使用 !important 则除外）。

标签： javascript jquery css dom

【解决方案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);

fiddle

【讨论】：

【解决方案2】：

我知道这已经很久了，但无论如何它可能会帮助寻找答案的人。当想要支持旧版浏览器时，依赖 CSS3 过渡属性可能会导致麻烦。

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

正如官方文档所述：'

类似于原生 CSS 过渡，jQuery UI 的类动画提供从一种状态到另一种状态的平稳过渡，同时允许您可以保留有关在 CSS 中更改哪些样式的所有详细信息，以及超出你的 JavaScript。

您可以阅读所有相关信息here。

jQuery UI 也可以被编译成只包含你需要的东西，所以你可以通过排除你不会使用的特性来减少库的大小。检查可用选项here。

希望它对某人有所帮助！

【讨论】：

【解决方案3】：

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

但是，如果您想在类之间进行动画处理，则使用 css3 过渡属性会更好地提高性能和清洁度。见例子：

HTML

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

JQuery（也可以使用 vanilla 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;
}

【讨论】：