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

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

使用方法 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;}
jQueryでシンプルにマウスオーバー時に画像をスライドさせるサンプル

sponsors

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

記事作成:
記事URL:

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