jQuery .slideUp()粘合

Question

我在使用jQuery slideUp()方法时遇到了问题。我有一个计时器设置为滑动一个div超过1秒，然后显示一个段落。我的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显然是针对块元素而不是表元素工作的。

因此，将display:table从.access-intro1类中删除，它将运行得很好。

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

CodePen演示