jquery - CSS 仅在 jQuery 动画完成后渲染。如何解决？

Question

我有一个隐藏元素，我正在使用简单的.slideDown()功能向下滑动。该元素内部还有另一个元素，但在向下滑动完成之前不会显示。

这是一个带有演示的小提琴。代码非常简单

$("a").on("click", function() {
    $("#test").slideDown(1000);
});

和

<div id="test">
    <div class="hiddenbar">
    </div>

    Long Para
</div>
<a>Click Here</a>

slideDown.hiddenbar完成后显示。有什么办法可以克服吗？

Answer 1

在过渡期间，#testgets 会overflow: hidden产生负头寸和边距。

尝试重新设计布局，以免在定位中使用负值：top、、left等

Answer 2

你可以试试这个，但不是最好的方法。

$("a").on("click", function() {
    $('.hiddenbar').css('top','0');
    $('#test').slideDown(1000,function(){
        $('.hiddenbar').css('top','-4px');
    });
});