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 Demo

jQuery .slideUp（）坚持

1 个答案: