blurring / 2014/05/15

BLURRING

JS

// 各色span生成
$('.blurring').wrapInner('');
$('.blurring span.black').before('');
$('.blurring span').text('BLURRING');

// マウスオーバー
$('.blurring').hover(function(){
	$('span' ,this).not('.black').css({'display':'block'});
	var speed = 250;
	$('.cyan' ,this).animate({'top':'5px','left':'5px'},speed,'swing');
	$('.magenta' ,this).animate({'top':'-5px'},speed,'swing');
	$('.yellow' ,this).animate({'top':'5px'},speed,'swing');
	$('.blue' ,this).animate({'top':'-5px'},speed,'swing');
	$('.red' ,this).animate({'left':'-5px'},speed,'swing');
	$('span' ,this).not('.black').animate({'opacity':'0.5'},speed,'swing');
	$('.black' ,this).animate({'opacity':'0.75'},speed,'swing');
	setTimeout(function(){
		$('span' ,this).not('.black').css({'-webkit-filter':'blur(1px)'});
	},2/speed);
},function(){
	var speed = 250;
	$('span' ,this).not('.black').animate({'top':'0','left':'0','opacity':'1'},speed,'swing');
	$('.black' ,this).animate({'opacity':'1'},speed,'swing');
});