[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト

マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。

How to create Skype-like buttons using jQuery
demo

外部スクリプトにjquery.jsを指定し、下記を記述します。

<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>

L.03

ホバーの対象となるclassを記述します（.button）。

L.04

ホバー時の設定です。
class名「.button」内のimgが対象です。

L.05-07

アニメーションの設定です。
上から順番に実行されます。

Post on:2009年3月12日