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

Question

我想了解 jQuery 动画的工作原理。

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

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

或者我可以简单地使用 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;
}

j查询

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

fiddle