jQueryで要素をプルプル揺れさせてみる！

サクウェブＴＶはコチラ↓↓↓

例えば、マウスオーバーで少し変わったことをしたいと思ったらこんなのもありかもです。

今回は指定した要素をマウスオーバーでプルプル揺れさせてみます。

必須ではないですが、プラグイン化してからやりましょう。

以下をyure.jsとして保存してください。

yure.js

(function($) {
    $.extend({
		yure: function yure(target){
				target.css("position","relative");
				target.animate({left:"-5px"},100)
					.animate({left:"5px"},100)
					.animate({left:"-2.5px"},100)
					.animate({left:"2.5px"},100)
					.animate({left:"-1.25px"},100)
					.animate({left:"1.25px"},100)
					.animate({left:"-0.625px"},100)
					.animate({left:"0.625px"},100)
					.animate({left:""},100);
			}
	});
})(jQuery);

そして以下のように読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yure.js"></script>
<script type="text/javascript" src="script.js"></script>

更に、script.jsに例えば以下のような感じで記述します。

$(function(){
    $("#target").mouseover(function(){
        $.yure($(this));
    });
});

これでHTML内でid="target"と指定した要素がマウスオーバーでプルプルします。

ちなみにtargetというidは例ですのでここは自由に指定してください。