IE7対応!リストのホバーアニメーションソースサンプル(border編)

2015/1/26 Animation, JS/jQuery, UI/UX

リストのホバーアニメーションシリーズをお送りしたいと思います。
時代はCSS3やSVGを使ったアニメーションがトレンドですがIE7対応が必要なサイトもまだあります。その場合でも遊び心をもたせないといけないこともありますよね。

制作のアイディア、ヒントになれば幸いです。

1.罫線アニメーション(太くなる)

DEMO

//listにborder用のdomを追加する
$('.listBox').each(function() {
	var borderElem = '<div class="border-top"></div><div class="border-left"></div><div class="border-right"></div><div class="border-bottom"></div>'
	$(this).append(borderElem)
});
//animation
function borderAnimeOn (elem){
	elem.find('.border-top').delay(60).stop(true, false).animate({ top:'0'}, 370, 'easeOutCubic');
	elem.find('.border-left').delay(60).stop(true, false).animate({ left:'0' }, 370, 'easeOutCubic');
	elem.find('.border-right').delay(60).stop(true, false).animate({ right: '0' }, 370, 'easeOutCubic');
	elem.find('.border-bottom').delay(60).stop(true, false).animate({ bottom: '0' }, 370, 'easeOutCubic');
}
function borderAnimeOff (elem){
	elem.find('.border-top').stop(true, false).animate({ top:'-10px'}, 370, 'easeOutCubic');
	elem.find('.border-left').stop(true, false).animate({ left:'-10px' }, 370, 'easeOutCubic');
	elem.find('.border-right').stop(true, false).animate({ right: '-10px' }, 370, 'easeOutCubic');
	elem.find('.border-bottom').stop(true, false).animate({ bottom: '-10px' }, 370, 'easeOutCubic');
}
//hoverイベント
$('#listContents .listBox').each(function() {
	var self = $(this)
	self.hover(function(){
		borderAnimeOn(self);
	},function(){
		borderAnimeOff(self);
	})
});

overflow:hiddenの外側にボーダーのdivを隠しておいてhoverした際にアニメーションで内側に入れることで罫線が徐々に太くなる様に見えています。

2.罫線アニメーション(伸びる)

DEMO

ポイントはbottomのボーダーですね。width:0pxからanimationで伸ばすと
基準点が右下からwidthを増やすとlistBox外に出て見えない訳です。そうならないようpositionも一緒に移動してやる必要があります。

//listにborder用のdomを追加する
$('.listBox').each(function() {
	var borderElem = '<div class="border-top"></div><div class="border-left"></div><div class="border-right"></div><div class="border-bottom"></div>'
	$(this).append(borderElem)
});
//animation
function borderAnimeOn (elem){
		elem.find('.border-top').delay(60).stop(true, false).animate({ width:'310px'}, 370, 'easeOutCubic');
		elem.find('.border-left').delay(60).stop(true, false).animate({ height:'310px' }, 370, 'easeOutCubic');
		elem.find('.border-right').delay(60).stop(true, false).animate({ height: '310px' }, 370, 'easeOutCubic');
		elem.find('.border-bottom').delay(60).stop(true, false).animate({ width: '310px',left:'0' }, 370, 'easeOutCubic');
}
function borderAnimeOff (elem){
		elem.find('.border-top').stop(true, false).animate({ width:'0px'}, 370, 'easeOutCubic');
		elem.find('.border-left').stop(true, false).animate({ height:'0px' }, 370, 'easeOutCubic');
		elem.find('.border-right').stop(true, false).animate({ height: '0px' }, 370, 'easeOutCubic');
		elem.find('.border-bottom').stop(true, false).animate({ width: '0px' ,left:'310' }, 370, 'easeOutCubic');
}
//hoverイベント
$('#listContents .listBox').each(function() {
	var self = $(this)
	self.hover(function(){
		borderAnimeOn(self);
	},function(){
		borderAnimeOff(self);
	})
});

次回はリストの上に要素が乗るオーバーレイ編をお送りしたいと思います。

enumblog