【JQuery】リンクやボタンクリックでDIVなどの要素をふわっと消す

JQueryを使って要素を非表示にする方法を紹介します。

HTML

<div class="hide_box">
	<p>下の「OK！」をクリックするとこの文章が消えます。</p>
	<p class="hide">OK！</p>
</div>

JQuery

$(function () {
	$(".hide").click(function(){
		$(this).parents(".hide_box").animate({ opacity: "hide" }, "high"); 
	});
});

CSS

.hide_box {
	width: 350px;
	background: #ededed;
	padding: 10px;
	text-align: center;
}
.hide_box .hide {
	cursor: pointer;
	color: #666;
}

※ 上のサンプルは画像です

OK！をクリックするとふわっと消えます。
警告やお知らせを表示した後、閉じさせるときなどに使えますね。