マウスオーバー時に要素を指定位置へ移動させるjQueryのコード

マウスオーバー時に要素を指定位置へ移動させるjQueryのコード

マウスオーバーした時に指定した要素を、指定した位置へアニメーションを付けて移動する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;
}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能