Animating addClass & removeClass with jQueryUI or CSS

Animating addClass & removeClass with jQueryUI or CSS

本文关键字：with jQueryUI or CSS removeClass addClass amp Animating      更新时间：2023-09-26

我的小提琴：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 重新排列函数。 我没有成功。 关于如何对此功能进行动画处理的任何建议？

我想

我明白了你想要的。

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");
    }
);
你能对

你寻找的动画类型有更多的描述吗？ 您是否希望使用 CSS 或 JQuery 制作动画？ 有很多方法可以做到这一点，我只是想为您的特定情况找到最好的方法。

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

相关文章：