如何使div具有延迟和缓和效果

Question

我试图在页面加载时显示div也有缓动效果我试过这个使得div在页面加载（5秒）之后显示正常的效果但是它没有缓和效果。我不知道如何在这里做出缓和效果。 这是fiddle

jQuery的：

jQuery('.bar_b_message').hide(0).delay(5000).show(0)
                        .slideDown(5000, 'easeOutBounce');

HTML：

<div class="bar_builder">
    <div class="bar_b_message">This is for testing.</div>
</div>

Answer 1

您应该删除“.show（）”。 slideDown方法将负责显示div。

所以请试试这个：

jQuery('.bar_b_message').hide(0).delay(5000).slideDown(5000, 'easeOutBounce');

Answer 2

试试这个

Html（与您的相同）

<div class="bar_builder">
   <div class="bar_b_message">This is for testing.</div>
</div>

的jQuery

$(document).ready(function(){
    $('.bar_b_message').delay(5000).slideDown(5000, 'easeOutBounce');
});

CSS

.bar_b_message{ display: none; }

CSS最初隐藏了div。在加载时，jQuery暂停5秒然后向下滑动div（slideDown也将div'display'属性设置为'block'）