Question

我有一个高度为1“线”的div。单击一个按钮时，我希望它消失，同时出现另一个带有更多行的div。我得到了它的工作但不管我做了什么1行div在某种程度上快速消失，所以它几乎就像我根本不使用转换一样。对于多线路div来说，它很有用。

所以我的问题在于我能做些什么，以便转换为不显示对于1行div 很好（很好的是它消失得很慢而不是只是嗖嗖地消失了。在这里注意它也是为了使它所使用的地方不再使用，这也是我原本选择最大高度方式的原因

HTML代码：

    <div id="Simple" class="Hide Show">
        <div>1. simple</div>
    </div>
    <input type="Button" OnClick=" $('#Simple').removeClass('Show');$('#Advanced').addClass('Show');" value="Switch" />
    <div id="Advanced" class="Hide">
        <div>1. advanced</div>
        <div>2. advanced</div>
        <div>3. advanced</div>
        <div>4. advanced</div>
    </div>

css课程：

.Hide {
    max-height: 0;
    transition: max-height 0.2s ease;
    overflow: hidden;
}

.Show {
    max-height: 500px;
    transition: max-height 0.7s ease-in;
}

链接到代码的小提琴： https://jsfiddle.net/7u12yvm0/

作为信息还有：我正在使用Internet Explorer（它也应该适用于IE11）。

Answer 1

执行以下操作

transition: max-height 0.7s ease;

和

<input type="Button" OnClick=" $('#Simple').hide('slow').removeClass('Show');$('#Advanced').addClass('Show');" value="Switch" />

请参阅this

Answer 2

尝试使用jQuery fadeOut

$('#Simple').fadeOut('slow');$('#Advanced').addClass('Show');"

Answer 3

Fiddle

你设置了一个非常大的最大高度。单击按钮时，所有最大高度都会生动这就是为什么动画花了这么长时间。

设置：max-height: 20px;是一行文字的可敬高度。

如何将转换计时器调整到您想要的时间。

如何为1行div创建最大高度0转换？

3 个答案: