6

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

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

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

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

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

4

3 回答 3

5

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

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

正如官方文档所述：'

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

您可以在此处阅读所有相关信息。

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

希望它对某人有所帮助！

于 2014-07-28T18:36:57.960 回答
5

它将覆盖内联样式。

我现在将展示一个带有顶部的版本，左边是动画的，但你可以将它应用于几乎所有的 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);

这是您在“检查元素”时看到的

小提琴

于 2013-06-17T12:56:39.710 回答
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;
}
于 2013-06-18T16:43:44.437 回答