jQuery 是不是在两个不同的 CSS 类之间进行动画处理?
Posted
技术标签:
【中文标题】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 则除外)。 【参考方案1】:它将覆盖内联样式。
我现在将展示一个带有顶部的版本,左侧是动画的,但您可以将它应用于几乎所有的 CSS 属性。
<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;
【讨论】:
以上是关于jQuery 是不是在两个不同的 CSS 类之间进行动画处理?的主要内容,如果未能解决你的问题,请参考以下文章
我们可以像 CSS3 一样在 jQuery 中使用类转换吗?
在 jQuery UI CSS 框架中使用矢量图标作为 Web 字体而不是 PNG