Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

jQueryでフェードするメッセージ表示してみる

Jun272007
Vote:
http://bizcaz.com/archives/2007/06/27-233705.php
Categories: jQuery
Tags: jQuery
Social Bookmark

Prev Page: jQueryでサイドバー折りたたみをやってみる
Next Page: 半透明レイヤーでページブロックしてみる(blockUI)

こんにちわ^^

来月から COOL BIZ に入ります。

だからなんだってかんじですが、とにかく COOL BIZ なんです。とっても嫌な時期に入るんです。

わたしの机の位置はただでさえ、パーティションに囲まれて風通し悪いのに、追い討ちかけて COOL BIZ なんです（つω-`｡）
今年こそは位置を変えてもらおう!! と今から意気込んでおりますヾ（｀Д´*）

さてさて、今回もやっぱり jQuery に纏わるカスタマイズです (;￣∇￣A
jQuery を使って、メッセージをフェードしながら次々と表示されていくカスタマイズやってみました。

わたしのサイトではバナー広告を表示させてませんが、このカスタマイズで広告を切り替えていくってのもおもしろいかも、です (￣∇￣)b

jQuery を使ってフェード効果を持たせるには、こちらのMedienfreunde Leipzig::Fade Away - InnerFade with jQuery IIを参考にしました。
以下にサンプルを示します。

サンプルを表示できませんでした。

上記サンプルは、わたしのサイトの最近のエントリを順番に表示させてます。

ディレクトリ構成

http://●●●.com/
|
+-- index.html <-- 各自のトップページ
+-- styles-site.css <-- 各自のスタイルシート
|
+-- js/
| +-- jquery/
| | |
| | +-- innerfade/ <-- 新規作成
| | |
| | +-- jquery.innerfade.js
| |
| +-- jquery.js
| +-- jquery-effect.js
| |

カスタマイズ

まずは JavaScript をダウンロードします。
上記 URL から jquery.innerfade.zip という圧縮ファイルをいただいてください。

そして適当なフォルダに展開して、上記ディレクトリ構成のようにアップロードします。
以下のコードをコピペして jquery-effect.js というファイル名で保存します。
jquery-effect.js
1. $(function() {
2. $(document).ready(
3. function(){
4. $('#innerfade-block').innerfade({
5. animationtype: 'fade',
6. speed: 750,
7. timeout: 2000,
8. type: 'sequence',
9. containerheight: '1em'
10. });
11. });
12. });
innerfade 関数のパラメータは以下の通りとなってます。
- animationtype: アニメーションタイプを選択します。
  'fade' or 'slide' (Default: 'fade')
- speed:フェード速度を設定します。
  ミリ秒 or slow, normal, fast(Default: 'normal')
- timeout:フェード間のタイムアウト値を設定します。
  ミリ秒(Default: '2000')
- type:スライドさせるタイプを選択します。
  'sequence' or 'random' (Default: 'sequence')
- containerheight:コンテナの高さを指定します。
  (Default: 'auto')
お好みで変更してください。
また、赤い字の部分をこれから説明する ul タグ ID 名称に変更します。
最後にテンプレートを変更します。
HTML ヘッダ(<head>～</head>)内に以下を追加します。
1. <script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
2. <script src="<$MTBlogURL$>js/jquery/innerfade/jquery.innerfade.js" type="text/javascript"></script>
3. <script src="<$MTBlogURL$>js/jquery/jquery-effect.js" type="text/javascript"></script>
そして、上記サンプルは以下のようになっています。
1. <ul id="innerfade-block">
2. <MTEntries>
3. <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a> <$MTEntryModifiedDate language="en" format="%y/%m/%d"$></li>
4. </MTEntries>
5. </ul>
大事なところは赤い字の部分です。
先ほど jquery-effect.js で説明した 'innerfade-block' と上記 <ul id="innerfade-block"> の名称を合わせて下さい。

そうしないと思った動作しませんのでご注意ください。
一通り変更したら再構築します。