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

Question

我的小提琴：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);
    }
});

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

Answer 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");
    }
);

Answer 2

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

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