borderのぐいーん / 2013/03/12

HTML

CSS

div.imageArea {
	position: relative;
	width: 200px;
	height: 160px;
	background: #fff;
	margin: 20px auto 0;
}
p.animeObj {
	position: absolute;
}
p.base1,
p.border1 {
	top: -1px;
	left: 0px;
	height: 0px;
}
p.border1 {
	width: 0px;
}
p.base1 {
	width: 202px;
}
p.base2,
p.border2 {
	top: 0px;
	right: -2px;
	width: 200px;
}
p.border2 {
	height: 0px;
}
p.base2 {
	height: 161px;
}
p.base3,
p.border3 {
	height: 160px;
	width: 202px;
}
p.base4,
p.border4 {
	height: 160px;
	width: 0px;
}
p.base1 {
	border-top: #e0e0e0 1px solid;
}
p.border1 {
	border-top: #282828 1px solid;
}
p.base2 {
	border-right: #e0e0e0 1px solid;
}
p.border2 {
	border-right: #282828 1px solid;
}
p.base3 {
	border-bottom: #282828 1px solid;
}
p.border3 {
	border-bottom: #e0e0e0 1px solid;
}
p.base4 {
	border-left: #282828 1px solid;
}
p.border4 {
	border-left: #e0e0e0 1px solid;
}
p.thumb img,
p.over img {
	position: absolute;
	top: 10px;
	left: 11px;
	width: 180px;
	height: 140px;
}

JS

var pCode = "
"
$("div.imageArea").html(pCode);
$("div.imageArea p").addClass("animeObj");

$("div.imageArea").mouseover(function(){
	$(this).children("p.over").stop().animate({"opacity":"1"}, 500, 'easeOutExpo');
	$(this).css({"background":"#fefefe","cursor":"pointer"});
	$(this).children("p.border1").stop().animate({"width":"202px"}, 500, 'easeOutExpo');
	$(this).children("p.border2").stop().animate({"height":"161px"}, 500, 'easeOutExpo');
	$(this).children("p.border3").stop().animate({"width":"0px"}, 500, 'easeOutExpo');
	$(this).children("p.border4").stop().animate({"height":"0px"}, 500, 'easeOutExpo');
}).mouseout(function() {
	$(this).children("p.over").stop().animate({"opacity":"0"}, 500, 'easeInExpo');
	$(this).css({"background":"#fff","cursor":"default"});
	$(this).children("p.border1").stop().animate({"width":"0px"}, 500, 'easeInExpo');
	$(this).children("p.border2").stop().animate({"height":"0px"}, 500, 'easeInExpo');
	$(this).children("p.border3").stop().animate({"width":"202px"}, 500, 'easeInExpo');
	$(this).children("p.border4").stop().animate({"height":"160px"}, 500, 'easeInExpo');
});