[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
Post on:2009年3月12日
sponsors
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。
How to create Skype-like buttons using jQuery
demo
外部スクリプトにjquery.jsを指定し、下記を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
- L.03
- ホバーの対象となるclassを記述します（.button）。
- L.04
- ホバー時の設定です。
class名「.button」内のimgが対象です。 - L.05-07
- アニメーションの設定です。
上から順番に実行されます。
sponsors
