javascript - 如何制作具有延迟和缓动效果的div

Question

我试图在页面加载时显示 div 延迟也具有缓动效果我尝试了这个来使该 div 在页面加载（5 秒）后显示为缓动效果，该 div 正确显示但它不是缓动效果。我不确定如何在这里制作缓动效果。这是小提琴

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>

score 3 · Accepted Answer

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

所以请试试这个：

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

score 2 · Accepted Answer

尝试这个

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'）

2 回答 2