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

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

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




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

//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.罫線アニメーション(伸びる)

ポイントはbottomのボーダーですね。width:0pxからanimateで伸ばすと
基準点が右下から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);
	})
});

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

Share

  • このエントリーをはてなブックマークに追加

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>