ブログ練習帳

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でした。どきどき。

2012年1月18日1:22 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)