jQueryで遊んでみるその3

Home » Tech&Tips » jQueryで遊んでみるその3

jQueryで遊んでみるその3

Posted by: かむ Posted date: 4月 29, 2010 | 2 Comments

←その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
エフェクト: fadeOut と fadeIn

エフェクトも色々あるので
エフェクト部分を好きなの選んで使ってみると面白いかも