jQueryでシンプルにマウスオーバー時に画像をスライドさせる

マウスオーバーでちょっとエフェクトをかけたい。
でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。
今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。
via:Useful image hover slide effect with jQuery | image hover,image slide

sponsors

使用方法

jQueryからjquery.jsをダウンロードします。
またマウスオーバーで変化を与えたい画像を下記のように記述します。

<div id="id名">
	<a href="#"><img src="画像パス" /></a>
</div>
なお、画像はエフェクト分を含めた形で作成します。

このため、最初はオーバー画像を隠すようにCSSを書きます。

#id名 {
	width:296px;
	height:130px; //半分の高さ
	position:relative;
	overflow:hidden;
}
これに対しJavaScriptは下記のようにします。

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#id名 a").hover(function(){ //id名のaタグにマウスを乗せた時
		$("img", this).stop().animate({top:"-130px"},{duration:200}); //top位置-130pxに200msかけて移動
	}, function() { //マウスが外れた時
		$("img", this).stop().animate({top:"0px"},{duration:200});//top位置0pxに200msかけて戻す
	});
});
</script>
最後にCSSで画像にposition:absoluteを付与すれば完成です。
img {position:absolute;}

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors