blur / 2014/03/12

HTML

ソース参照

CSS

.pic_area {
	position: relative;
	width: 640px;
	height: 160px;
}
.pic_area img {
	display: none;
	position: absolute;
}
.pic.blur,
.pic.normal {
	top: 0;
	left: 0;
	width: 640px;
	height: 160px;
}
.title.blur,
.title.normal {
	top: 40px;
	left: 204px;
	width: 232px;
	height: 82px;
}
.title.normal {
	opacity: 0;
}

JS

$(function(){
	$('.pic_area img').on("load",function(){
		$('.pic.normal').show().animate({'opacity':'0'}, 1000);
		$('.pic.blur').show();
		$('.title.blur').show().animate({'opacity':'0'}, 1500);
		$('.title.normal').show().animate({'opacity':'1'}, 1500);
	});
});