jQuery Animate Sample

jQueryのanimateを使用してちょっと遊んでみました。

• 背景色を変更するサンプル

jQueryにはいろいろなプラグインはあるんですが、使い方を知るのも結構な手間で、サクっとできちゃうモノは自分で書いた方が早いわけで。サクッと作れるモノをアップしてみます。

jQueryで以下のようにしているだけです。

Javascript

$("#fuga").hover(function(){
    $(this).prev().stop().animate({top:"-400"},"slow");
},function(){
    $(this).prev().stop().animate({top:0},"slow");
});

HTML

<div id="Container">
    <div class="bg"></div>
    <img id="fuga" src="img.png"/>
</div>

『"#fuga"』の上にマウスカーソルがのると背景画像を動かします。
『$(this).prev()』、上記例で『.bg』が動かす要素です。


背景となる要素(.bg)のスタイル

.bg{
    position:relative;
}

動かす要素の親要素

#Container{
    position:relative;
    overflow:hidden;
}

『overflow:hidden;』ではみ出た部分は見えないようにします。


一番上になる画像を持つ要素

#fuga{
    position:absolute;
    top:0;
    left:0;
}

その他、各要素にwidth,heightの指定も必須です。

jQueryがどうと言うより、CSSの指定がポイントかもしれませんね。

『jQuery.color.js』を使うと文字色や背景色も変えられるようになるので今回併用しています。

他にも2，3個できたんで機会があればそのうちに...