jQueryのanimateを用いてページ下部にメッセージを表示させる

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

ボタンをクリックすることでページの下部に、メッセージを3秒間させるアニメーションを作成する。

heightが0pxなので、読み込んだ時点では、Message部分は見えない。

HTML部分

<input type="button" value="押してください" id="btn">
<div id="alert">Message</div>

CSS部分

html,body{
	margin:0;
	padding:0;
}
#alert{
	width:100%;
	height:0px;
	vertical-align:top;
	text-align:center;
	background-color:blue;
	opacity:0.3;
	color:white;
	position:fixed;
	bottom:0;
}

JavaScript部分

$(function(){
	$('#btn').on('click',function(){
		$('#alert').animate({
			height:"50px"
		},1000);
		$('#alert').animate({
			height:"50px"
		},3000);
		$('#alert').animate({
			height:"0px"
		},1000);
	});
});

参考リンク
animate(params, [duration], [easing], [callback])