jQueryのコードに関する質問

jQueryで下記を取り入れていますが、わからない点があります。
http://www.ideaxidea.com/archives/2009/04/how_to_create_jumping_button.html
http://www.jankoatwarpspeed.com/examples/skype_buttons/

※HTMLのソースは下記を使用するものとします
<a class="button" href="#"><img src="a.png" ></a>
<a class="button" href="#"> <img src="b.png" ></a>

JavaScriptのサンプルソース
<script type="text/javascript">
$(document).ready(function(){
$(".button").hover(function(){
$(".button img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
</script>
このサンプルソースを使っているのですが、サンプルではボタンが1つしかないのですが、当方のhtmlにはボタンが2つありますので、2つ同時にジャンプしてしまうのです。

当方ではJavaScriptのコード等書けませんので、困っております。
マウスオーバーで、2つ同時にジャンプするのではなく、a.pngならaが、b.pngならbが動くようなサンプルコードをご教授頂けないでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/10/14 21:01:57
  • 終了:2012/10/14 21:45:10

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/10/14 21:39:24

ポイント100pt

thisを使う。
http://jsfiddle.net/cherenkov/KLXvq/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
	.button {
		position: relative;
	}
	.button img {
		position: relative;
	}
</style>
<script>
$(function(){
	$(".button img").hover(function(){
		$(this)
			.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
			.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
			.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
	});
});
</script>
</head>
<body>
	<br><br>
	<div>
		<a class="button" href="#"><img src="http://q.hatena.ne.jp/favicon.ico"></a>
		<a class="button" href="#"><img src="http://d.hatena.ne.jp/favicon.ico"></a>
	</div>
</body>
</html>
他1件のコメントを見る
id:ty2016

ご回答ありがとう御座います。
希望した通りの動作ができましたので質問を終了致します。

2012/10/14 21:44:55
id:Cherenkov

このサンプルの場合、画像がジャンプしたとき新たにhoverが発生してるからかな

2012/10/14 21:47:20

その他の回答(1件)

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202012/10/14 21:07:36

ポイント100pt

コメントを受けて回答を修正しました。

HTML本体

<html>
<head>
<script type="text/javascript" src="hoge.js"></script>
</head>
<body>
<a class="button1" href="#"><img src="a.png" ></a>
<a class="button2" href="#"><img src="b.png" ></a>
<a class="button3" href="#"><img src="c.png" ></a>
<a class="button4" href="#"><img src="d.png" ></a>
<a class="button5" href="#"><img src="e.png" ></a>
</body>
</html>

JavaScript "hoge.js"

$(document).ready(function(){
$(".button1").hover(function(){
$(".button1 img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
$(document).ready(function(){
$(".button2").hover(function(){
$(".button2 img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
$(document).ready(function(){
$(".button3").hover(function(){
$(".button3 img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
$(document).ready(function(){
$(".button4").hover(function(){
$(".button4 img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
$(document).ready(function(){
$(".button5").hover(function(){
$(".button5 img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
id:ty2016

ご回答ありがとう御座います。
実は、実際のHTMLにはボタンが5つありこれを5つ分作るとなると、
相当な長いJavaScriptになってしまいまして、何とか短いコードで実現する方法はないでしょうか?

2012/10/14 21:12:20
id:ty2016

実際のHTMLにはボタンが5つありこれを5つ分コピーして5つ作るとなると、相当な長いJavaaScriptになってしまいますが、短いコードで実現する方法を探しております。
『そういった方法はない』ということであれば長いコードで妥協致します。

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/10/14 21:39:24ここでベストアンサー

ポイント100pt

thisを使う。
http://jsfiddle.net/cherenkov/KLXvq/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
	.button {
		position: relative;
	}
	.button img {
		position: relative;
	}
</style>
<script>
$(function(){
	$(".button img").hover(function(){
		$(this)
			.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
			.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
			.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
	});
});
</script>
</head>
<body>
	<br><br>
	<div>
		<a class="button" href="#"><img src="http://q.hatena.ne.jp/favicon.ico"></a>
		<a class="button" href="#"><img src="http://d.hatena.ne.jp/favicon.ico"></a>
	</div>
</body>
</html>
他1件のコメントを見る
id:ty2016

ご回答ありがとう御座います。
希望した通りの動作ができましたので質問を終了致します。

2012/10/14 21:44:55
id:Cherenkov

このサンプルの場合、画像がジャンプしたとき新たにhoverが発生してるからかな

2012/10/14 21:47:20
  • id:ty2016
    5つ分の長いコードでも、PHPのincludeのような別ファイルのJSファイルを読み込むという感じなら長くても問題はないです。
    ただ、HTMLで別ファイルのJSファイルを読み込んで動作させるやり方を忘れてしまいました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません