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 中给定了 withheight,我将如何安全地为 widthheight 设置动画这个元素?

我需要为 CSS 类中的值设置动画吗?还是我需要为widthheight 设置一个新的CSS 类,并让jQuery 动画从oldClassnewClass

或者我可以简单地使用 jQuery 的 .width().height() 方法,而不管 CSS 中指定了哪些值?

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

【问题讨论】:

Javascript 直接将内联 CSS 添加到 DOM 中的元素中,这会覆盖样式表中设置的任何样式(如果使用 !important 则除外)。 【参考方案1】:

它将覆盖内联样式。

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

【讨论】:

【参考方案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 在点击时应用不同的 CSS 类

在 jQuery UI CSS 框架中使用矢量图标作为 Web 字体而不是 PNG

两个不同页面上的两个元素可以在 HTML/CSS 中具有相同的 ID 吗?

两个 jquery 选择器之间的联合

jQuery问题 - 具有相同类的不同菜单之间的冲突