【jQuery】リンクテキストがアニメーションするサンプル

めんまのお願いを叶えました。

danceText

⇒デモ

【JS】

$(document).ready(function(){
	var cnt_list;
	var arr_list = new Array();
	var arr_str = new Array();
	var txt_list = "*";
	var txt_return;
	var block_name = '#danceTextBlock ul li';
	
	cnt_list = $(block_name).children('a').length;
	for (var i=0; i<cnt_list; i++){
		arr_list[i] = $(block_name).find('a').eq(i).text();
		
		$(block_name).eq(i).find('a').html(function(){
			for (var j=0; j<arr_list[i].length; j++){
				if(txt_list == "*"){
					txt_list = '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}else{
					txt_list = txt_list + '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}
			}
			txt_return = txt_list;
			txt_list = "*";
			return txt_return;
		});
	}
	
	$(block_name).find('a').mouseover(function(){
		// 要素個数を取得
		var elem = $(this).find('span');
		var n = elem.length;

		// アニメーション
		var c = 0;
		var id = setInterval(function(){
			if(c <= (n-1)){
				elem.eq(c).stop(true, false).animate({'marginTop':'-4px'},'fast').animate({'marginTop':'0px'},'fast');
				c++;
			}else{
				c = 0;
				clearInterval(id);
			}
		}, 80);
	});
});

【HTML】

<div id="conteiner"> 
	<div id="danceTextBlock">
		<ul>	
			<li><a href="#">じんたん</a></li>
			<li><a href="#">めんま</a></li>
			<li><a href="#">あなる</a></li>
			<li><a href="#">ゆきあつ</a></li>
			<li><a href="#">つるこ</a></li>
			<li><a href="#">ぽっぽ</a></li>
		</ul>
	</div>
</div>

【CSS】

#danceTextBlock ul{
	width: 200px;
	list-style: none;
}

#danceTextBlock ul li{
	height: 42px;
	background: #000000;
	line-height: 42px;
}

#danceTextBlock ul li a{
	display: block;
	width: 200px;
	height: 42px;
	color: #ffffff;
	text-decoration: none;
}

#danceTextBlock ul li a span{
	display: block;
	float: left;
}

⇒デモ

コメントを残す

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

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