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

Question

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

例如，如果我有一个带有CSS的a元素，使其看起来像CSS中的可点击图像和给定的with和height，我将如何安全地设置{{这个元素的{1}}和width？

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

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

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

Answer 1

它将覆盖内联风格。

我现在将展示一个带top的版本，左边是动画，但你可以在几乎所有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

Answer 2

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

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

正如官方文件所述：'

  

与原生CSS转换类似，jQuery UI的类动画   在允许的同时提供从一个州到另一个州的平稳过渡   你要保留关于在CSS和CSS中改变哪些样式的所有细节   超出你的JavaScript。

您可以阅读所有相关内容here。

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

希望它有所帮助！

Answer 3

jQuery动画仅动画数字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;
}