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属性。因此，您需要转换不同的属性。在我的小提琴。我将折叠状态的max-height设置为＆＃34; 0＆＃34;与overflow:hidden。这会导致容器无法显示。

在对象的选择器上，通过将max-height设置为高于容器的值来重置这些值。在这种情况下，我使用500px，然后将height设置为auto。这样做可以让容器取出它的高度，而不是设置硬度。

我还将转换值更改为仅转换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。

动画addClass＆amp;使用jQueryUI或CSS删除classClass

2 个答案: