JQueryのfadeInとfadeOutにトライです

Java ScriptライブラリのJQueryをちょっとだけ、トライです。

まず、JQueryをhttp://jquery.com/からダウンロードしてきます。

見習が今回、ダウンロードしたのは、jquery-1.7.1.min.js。とくに自分でJQuery書き足しちゃえ、ということがなければ、この圧縮版でOKみたい。で、ダウンロードしたら、使えるようにします。といっても、保存する場所だけしっかり決めればOKです。Dream Weaverを使って、ローカル環境でお勉強のみなら、Dream Weaverでサイトの管理をしている中のフォルダに保存すればOKです。

<script src="js/jquery-1.7.1.min.js"></script>

というように、HTMLのhead内でリンクを記述して使うので、サーバにあげてWEB公開するなら、JQueryを使うHTMLファイルでJQueryファイルへのパスが切れないように注意して、FTPソフトを使ってJQueryのほうもサーバにアップロードしておきます。Dream WeaverのFTP機能を使っているなら、サイトの定義さえしっかりしていれば問題ないですが、別のFTPソフトを使っているなら、間違えないようにしないと…。(自分に言い聞かせる見習。)

準備が整ったら、さっそくJQueryを書いてみます。JQueryはJava Scriptのライブラリなので、ファイルとして外部化するときには、Java Scriptと同じく拡張子をjsにして、

<script src="js/kamishibai.js"></script> 

とheadに記述すればOKです。

さっそくはじめてのJQuery書いてみました。CSSでdisplay:blockのものをだんだん消していくfadeOutと、display:noneのものをだんだん書いてゆくfadeInです。

XHTML

<div style="margin:auto">
<p><img src="imgs/fwpath00.gif" width="520" height="370" alt="" /></p>
<p id="fpara">むかしむかし、おマヌケなウェブデザイナー見習がいました。</p>
<p id="spara">いつもいつも、マチガイばかり…。「今日こそは」と誓っても、ミスを繰り返すばかりです。</p>
</div>

CSS

p{
margin:auto;
width:520px;
}
#fpara {
display:block;
}
#spara {
display:none;
}

Java Script(J Query)

// JavaScript Document
$(function(){
var fpara=$('#fpara');
var spara=$('#spara');
fpara.fadeOut(5000);
spara.fadeIn(5000,function(){
spara.css('padding','1em 0');
})
});

▼サンプルはこちら

はじめてのJQueryでした。どきどき。