nike / 2014/03/31

CLICK HERE

HTML

ソース参照

CSS

.box {
	margin: 40px auto;
	position: relative;
	cursor: pointer;
}

.title {
	color: #faf9f4;
	font-family: Helvetica,Arial;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}

.title a {
	color: #faf9f4;
}

.cn {
	position: absolute;
	width: 19px;
	height: 19px;
	font-size: 0;
	line-height: 0;
}

JS

$(function(){

	var titleHeight = $('.title a').height()+30;
	var titleWidth = $('.title a').width()+60;
	$('.box').css({'height':titleHeight+'px','width':titleWidth+'px'});
	$('.title a').css({'line-height':titleHeight+'px','opacity':'0'});

	var cnPosDefTop = titleHeight/2-10;
	var cnPosDefLeft = titleWidth/2-10;
	$('.cn').css({'top':cnPosDefTop+'px','left':cnPosDefLeft+'px'});

	var cnPosTop1 = -10;
	var cnPosLeft1 = -10;
	var cnPosTop2 = -10;
	var cnPosLeft2 = titleWidth-10;
	var cnPosTop3 = titleHeight-10;
	var cnPosLeft3 = -10;
	var cnPosTop4 = titleHeight-10;
	var cnPosLeft4 = titleWidth-10;

	function mouseOn() {
		$('.cn1').delay(100).stop().animate({'top':cnPosTop1+'px','left':cnPosLeft1+'px'},250,'easeOutQuart');
		$('.cn2').delay(100).stop().animate({'top':cnPosTop2+'px','left':cnPosLeft2+'px'},250,'easeOutQuart');
		$('.cn3').delay(100).stop().animate({'top':cnPosTop3+'px','left':cnPosLeft3+'px'},250,'easeOutQuart');
		$('.cn4').delay(100).stop().animate({'top':cnPosTop4+'px','left':cnPosLeft4+'px'},250,'easeOutQuart');
		$('.title a').css({'color':'#444'}).stop().animate({'opacity':'1'},750,'easeOutQuart');
	}

	function mouseOut() {
		$('.title a').stop().animate({'opacity':'0'},250,'easeOutQuart');
		$('.cn').delay(100).stop().animate({'top':cnPosDefTop+'px','left':cnPosDefLeft+'px'},250,'easeOutQuart');
	}

	$('.box').click(function(){
	        window.location=$(this).find('a').attr('href');
	        return false;
	});

	$('.box').hover(function(){
		mouseOn();
	},function(){
		mouseOut();
	});

});