jQuery .slideUp() 卡住

Question

我在使用 jQuery slideUp() 方法时遇到问题。我有一个计时器设置为在 1 秒内向上滑动一个 div，然后显示一个段落。我的 div 中有一个位于屏幕中央的 h1 元素。问题是当这个 h1 元素到达浏览器窗口的顶部时，滑动动画停止并在 h1 消失之前暂停片刻。滑动运动不会一直持续到顶部并为 h1 滑动设置动画，或者我可以通过任何方式平滑它，这是有原因的吗？我的代码:

HTML

<div class="screen fact fact-1" id="screen-6">
    <div class="access-intro1 fact-intro fact-intro-1">
        <h1>ACCESS</h1>
    </div>
    <p class="fact-text fact-text1"><span class="big countUp">150</span</p>
</div>

CSS

.fact-text1 {
    display: none;
}

.access-intro1 {
    height: 100%;
    width: 100%;
    display: table;
}

.access-intro1 h1 {
    margin-top: 0;
    display: table-cell;
    vertical-align: middle;
}

JS

window.setTimeout(accessTransition, 2500);
function accessTransition()
{
    $('.access-intro1').slideUp(1000);
    $('.fact-text1').css('display', 'inline-block');
    countUp();
}

Answer 1

jUqury slideUp() 函数使用 overflow:none 并将元素的 height 减少到 0随着时间的推移，创造近距离滑动它的效果。并且 overflow:none 显然适用于 block 元素而不是表元素。

因此，从 .access-intro1 类中删除 display:table，它将正常工作。

.access-intro1 {
    height: 100%;
    width: 100%;
    display:table; /*remove it*/ 
}

CodePen Demo