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>
このサンプルソースを使っているのですが、サンプルではボタンが１つしかないのですが、当方のhtmlにはボタンが２つありますので、２つ同時にジャンプしてしまうのです。
当方ではJavaScriptのコード等書けませんので、困っております。
マウスオーバーで、２つ同時にジャンプするのではなく、a.pngならaが、b.pngならbが動くようなサンプルコードをご教授頂けないでしょうか？
No.2
1504
493
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>
No.1
1728320
100pt
コメントを受けて回答を修正しました。
<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>
28
28
$(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
});
});
ご回答ありがとう御座います。
実は、実際のHTMLにはボタンが５つありこれを５つ分作るとなると、
相当な長いJavaScriptになってしまいまして、何とか短いコードで実現する方法はないでしょうか？
実際のHTMLにはボタンが５つありこれを５つ分コピーして５つ作るとなると、相当な長いJavaaScriptになってしまいますが、短いコードで実現する方法を探しております。
『そういった方法はない』ということであれば長いコードで妥協致します。
No.2
1504493
ここでベストアンサー
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>
ご回答ありがとう御座います。
希望した通りの動作ができましたので質問を終了致します。
このサンプルの場合、画像がジャンプしたとき新たにhoverが発生してるからかな
ty2016
2012/10/14 21:18:15
ご回答ありがとう御座います。
2012/10/14 21:44:55希望した通りの動作ができましたので質問を終了致します。
このサンプルの場合、画像がジャンプしたとき新たにhoverが発生してるからかな
2012/10/14 21:47:20