jQueryで遊んでみる その3

←その2
jQueryには、いろんなエフェクトが用意されてるので
とやかく考えないでビシバシ使ってみる。

まずはサンプル。

【フェード】←マウスをあわせてみて




ソースはこんな風

適当に画像とテキストを用意してそれぞれidを割り当てる
<p id="fade">【フェード】←マウスをあわせてみて</p>
<img src="1.png"  id="photo" />

Javascriptはこんな風
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
$(function(){
 
//フェードアウト
    $("#fade").mouseover(function() {
    $("#photo").fadeOut("slow");
    });
 
//フェードイン
    $("#fade").mouseout(function() {
    $("#photo").fadeIn("slow");
    });
});
 
</script>
見ての通り、
<div id=”fade”>に
マウスが乗ったら、
画像 id=”photo”に対して、fadeOut()
もう一つは逆に、マウスが出たらfadeIn()としてます。

使ったのは、
イベント: mouseover、mouseout
エフェクト: fadeOutfadeIn

エフェクトも色々あるので
エフェクト部分を好きなの選んで使ってみると面白いかも
Effects – jQuery 日本語リファレンス
なんか説明がおおざっぱだけど、ニュアンスでご理解いただきたい(汗

つづく



You might also like

2 Comments

  • Prince

    5月 th, 2010 7:03 PM

    こんな簡単にアニメーションできるなんて楽しすぎです。

    ただ…マウスが乗っかった回数分だけ繰り返されて止まらなくなる現象は何とかなるんでしょうか(汗
  • かむ

    5月 th, 2010 11:46 PM

    Prince
    文字をトリガにしてしまったのでイマイチだった。(汗
    mouseoverだと、たいていは自分自身をフェードさせるし
    これはあんまり使うシーンがないので
    その4のがいいサンプルかな。