人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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が動くようなサンプルコードをご教授頂けないでしょうか?

●質問者: ty2016
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● oil999
●100ポイント

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

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
});
});

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

質問者から

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


2 ● Cherenkov
●100ポイント ベストアンサー

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>

Cherenkovさんのコメント
なんかジャンプが多いですね…

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

Cherenkovさんのコメント
このサンプルの場合、画像がジャンプしたとき新たにhoverが発生してるからかな
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ