例えば、何かを保存したときや、検索が見つからなかったときなど、ただ文字を書いてあげるだけじゃなく、アニメーションで強調したいときに使えます。
お知らせボタン
Bootstrapなどでもいろいろ用意されてますが、これくらいなら自前で作ったほうが融通が聞きます。
JSで中身のテキストを出し分けることによって、いろんば場面で使えます。
文字が長い時はdelayの秒数を伸ばしてあげましょう。
個人的には、上や下から飛び出してくるトーストのような表現より、このくらい控えめでも充分伝わる思います。
HTMLはこれだけ
<div id="fadein_box"></div> <div class="fadein_btn demo_btn">お知らせボタン</div>
JSもこれだけ
$(document).on('click', '.fadein_btn', function() {
$("#fadein_box").text('お知らせを記入してください').fadeIn().delay(2000).fadeOut();
});
告知するテキストのスタイルがちょっと長め
#fadein_box{
z-index:100;
display:none;
height: 20px;
font-size:12px;
line-height: 20px;
position: fixed;
top:0;
left:50%;
margin-left: -100px;
background-color: #444;
color:#FFF;
width: 200px;
text-align: center;
padding: 5px 10px;
}
