jQuery是否在两个不同的CSS类之间设置动画? [英] Does jQuery animate between two different CSS classes?

问题描述

我试图了解jQuery动画的工作原理.

I am trying to understand how jQuery animations work.

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

For instance, if I have an a element with CSS that makes it look like a clickable image and a given with and height in CSS, how would I safely animate the width and height of this element?

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

Do I need to animate the values in the CSS class? Or do I need to set a new CSS class with the target values for width and height, and let jQuery animate from oldClass to newClass?

还是我可以简单地使用jQuery的.width()和.height()方法，而不管CSS中指定了什么值?

Or can I simply use the .width() and .height() methods of jQuery, regardless of what values are specified in CSS?

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

What confuses me is: If I tweak the width of an element with jQuery, does this also modify my CSS, or does jQuery / JavaScript simply override the specified values in CSS with something else? I mean: After use jQuery to edit the width, does this width become the new value in the CSS file as well? Can I apply this class to other elements and they will have the new width?

推荐答案

它将覆盖内联样式.

我现在将显示一个顶部版本的动画，但您可以将其应用于几乎所有CSS属性.

I will now show a version with top, left being animated but you can apply it on almost all CSS properties.

HTML

<span id="test">blablabla</span>

CSS

span{
    position:absolute;
    display:block;
    height:50px;
    width:50px;
}

jquery

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

小提琴

这篇关于jQuery是否在两个不同的CSS类之间设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！