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が動くようなサンプルコードをご教授頂けないでしょうか?
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>
コメントを受けて回答を修正しました。
<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>
$(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にはボタンが5つありこれを5つ分作るとなると、
相当な長いJavaScriptになってしまいまして、何とか短いコードで実現する方法はないでしょうか?
実際のHTMLにはボタンが5つありこれを5つ分コピーして5つ作るとなると、相当な長いJavaaScriptになってしまいますが、短いコードで実現する方法を探しております。
『そういった方法はない』ということであれば長いコードで妥協致します。
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が発生してるからかな
ご回答ありがとう御座います。
2012/10/14 21:44:55希望した通りの動作ができましたので質問を終了致します。
このサンプルの場合、画像がジャンプしたとき新たにhoverが発生してるからかな
2012/10/14 21:47:20