memocarilog

マウスオーバーした時に指定した要素を、指定した位置へアニメーションを付けて移動するjQueryのコードです。

「サンプル」を作りました。メニューのマウスオーバー効果に使ってみました。

使い方

ヘッダー内に下記のように記入するとサンプルのような動きをしてくれます。アニメーションさせる要素にはCSS側で position: relative; を指定しておきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#menu li a')　// アニメーションをつける要素を指定
  		.hover(function() {
    	$(this).stop(true, true).animate({ left: 30 }, 150);
    		//  " left: 30 " の部分を変更で移動する位置を変更 
    		//  " , 150 " の部分でマウスオーバー時のスピードを変更
  		}, function() {
    	$(this).stop(true, true).animate({ left: 0 }, 150);
    		//  " left: 0 " の部分を変更で戻る位置を変更 
    		//  " , 150 " の部分でマウスアウト時のスピードを変更
  		});
	});
</script>

サンプルのコード

■サンプルのhead部分のコードです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#menu li a')
  		.hover(function() {
    	$(this).stop(true, true).animate({ left: 30 }, 150);
  		}, function() {
    	$(this).stop(true, true).animate({ left: 0 }, 150);
  		});
	});

</script>
</head>

■サンプルのbody部分のコードです。

<h2>メニューのサンプル</h2>
<ul id="menu">
<li><a href="#">Webdesign</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPhone</a>
</li>
</ul>
<p><a href="#">元のページに戻る</a></p>

■サンプルのcssのコードです。

h2{
	margin-top: 50px;
}
ul{
	margin:0;
	padding:0;
	position: relative;
}
#menu li a{
	width:120px;
	height:40px;
	background-color: #7EA1B2;	
	color:#333;
	text-align:center;
	text-decoration:none;
	line-height: 40px;
	border: solid 1px #29596D;
	display: block;
	overflow:hidden;
	margin-bottom: -1px;
	position: relative;
}
#menu li a:hover{
	background-color: #ccc;
}