Kwicks Examples: Example 1

もう、Flashにしか見えない。IE6だとダメダメだけど。。

ところでこれ、アコーディオン何っていうんだろ・・・？

その、アコーディオン某を自前で作るための参考。

jQuery Examples - Horizontal Accordion | Design Reviver

アコーディオン某

Be happy with jGlycy [jGlycy]

これ、便利。

<script><!--
$(document).ready(function(){
  $('div').cycle();
}
//--></script>

が、

<div jg="cycle"></div>

でオーケイ。
引数も渡せる。

<div jg="cycle" jg:cycle="fx:'shuffle',easing:'backout',delay:-4000"></div>

ありがたやー。
だったのだが、、、

jQuery1.3以降で、

◎W3Cの(X)HTML DTD上に無いattributeにはヒットしない
おかげで、jGlycyは全く使えなくなります:-(
せめてXHTMLに対してだけでも、Namespaceがちゃんと実装されればな…とも思いますが。

jGlycyは全く使えなくなります
...orz

jQuery

また新たなIEバグ発見（・∀・）

その名も「white noise」バグ

Prevent White Noise From Appearing in Images After Fading

↑によると、
・jQueryなどのJavaScriptライブラリで、フェードイン・アウトなどを用いると発症。
・症状は、真っ黒画素(#000000)が背景色に置き換わる、つまり透過する。
らしい。

そこで考えた。背景を真っ黒にしてしまえ、と。
アニメーション中は元の背景のままで、アニメーション終了後に真っ黒に。
これで、アニメーション中はホワイトの伊豆、じゃなく、ホワイトノイズが見えるものの、
落ち着いた状態では見えなくなる。
これで妥協でしょう。。

jQueryコードの例(フェードアウト→画像切り替え→フェードイン)：

target.nextSrc = "hoge.jpg";// 切り替える画像
// white noise @IE 対策(animate中は背景を元の色に)
jQuery(target).parent().css('background-color', parentBgColorOrg);
// 切り替えアニメーション開始
jQuery(target).animate({opacity: 0}, "slow", "easeInQuint", function(){
  // 前の画像が消えたら切り替え(透明のまま)
  jQuery(this).bind('load', function(){
    // 次の画像に切り替わったら表示
    jQuery(this).unbind('load').animate({opacity: 100}, "slow", "easeInQuint", function(){
      // white noise @IE 対策(animateが完了後は背景を真っ黒に)
      jQuery(this).parent().css('background-color', '#000');
    });
  }).attr('src', this.nextSrc);
});

引用元にも書いてあるが、このバグ、
IE8でもまだ引きずってるよ。

090225 追記しました。続・IEの「White Noise」バグ

jQuery whiteNoise IEのバグ

書きかけ記事を公開しようのコーナー

って、タイトルしかないやん。。

えーっとね。IE６あたりだと、画像の読み込み前に座標を決定してしまうらしく、画像を読み込んだ結果、その高さが変化した場合に、表示がずれちゃうらしいんだ。でも、あらかじめ高さ指定しておけばダイジョぶって話。多分ね。

さあ皆さんご一緒に。ダイジョぶの五段活用～
ダイジョばない
ダイジョびます
ダイジョぶ。
ダイジョぶ時
ダイジョべば
ダイジョぼう

五段活用 ダイジョぶ スタイルシート