使用 jQuery UI 或 CSS 动画 addClass 和 removeClass [重复]

Posted 2023-05-08

【中文标题】使用 jQuery UI 或 CSS 动画 addClass 和 removeClass [重复]

【英文标题】：Animating addClass & removeClass with jQueryUI or CSS [duplicate]

【发布时间】：2015-02-11 16:06:00

【问题描述】：

我的小提琴：http://jsfiddle.net/b2stctr8/

目标是通过单击图像来展开和折叠目标 div。我的方法是从一个带有 display:none 的折叠类开始。 javascript 删除类并允许显示 div。该代码有效，但我在尝试为动作设置动画时遇到了痛苦的时光。我正在加载 jQuery 和 jQueryUI。这是我当前的代码：

$('img.activator').click(
function()
    if ($('#mobileSelectors').hasClass('collapsed')) 
        $('#mobileSelectors').removeClass('collapsed', 200);
     else 
        $('#mobileSelectors').addClass('collapsed', 200);
    
);

回顾人们在 *** 上遇到的类似情况，我尝试重新安排我的 switchClass 函数以及解决方案中提到的 toggleClass。我没有成功。关于如何动画化这个函数有什么建议吗？

【参考方案1】：

我想我得到了你想要的。

JSFiddle

我在您的代码中添加了一堆 CSS。我会尽力解释的。

#mobileSelectors 
    background: yellow;
    height:auto;
    max-height:500px;
    text-align:center;
    display:block;
    line-height:100px;
    margin:0;
    -webkit-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;


#mobileSelectors.collapsed 
    max-height:0px;
    overflow:hidden;

首先，您只需要在基础元素上定义过渡。所以我把它从.collapsed 选择器中删除了。

您也不能转换 display 属性。因此，您将需要转换不同的属性。在我的小提琴中。我使用overflow:hidden 将折叠状态的max-height 设置为“0”。这会导致容器不显示。

在对象的选择器上，您可以通过将max-height 设置为比容器更高的值来重置这些值。在这种情况下，我使用了 500px，然后将 height 设置为自动。这样做是允许容器采用其内容的高度，而不是设置硬高度。

我还将转换值更改为仅转换max-height 而不是all。

-webkit-transition: max-height 0.5s ease;
-moz-transition: max-height 0.5s ease;
-o-transition: max-height 0.5s ease;
transition: max-height 0.5s ease;

最后，我将 Jquery 改为使用 .toggleClass。

$('img.activator').click(
    function()
        $('#mobileSelectors').toggleClass("collapsed");
    
);

【讨论】：

谢谢章。这非常有效，因为我的 div 内容不会经常更改。我没有想过尝试不同的属性，但既然你提到了它，过渡只适用于高度调整而不是显示值是有道理的。您的解释是 100% 完美的，谢谢。已实施并有效。

【参考方案2】：

您能否更详细地说明您要查找的动画类型？您是否希望使用 CSS 或 JQuery 制作动画？有很多方法可以解决它，我只是想为您的特定情况找到最好的方法。

如果您尝试使用 javascript 方法，一些有用的链接 Jquery Animate API. 另一个展示如何使用动画的链接来自 web tuts 我还发现它在尝试查看 codepen 中的实时工作示例时非常有用。

【讨论】：

我将 CSS 中的动画放在类（和 div）上，认为它们本来就可以工作。运气不好。