DIV要素内のフェードインに関して

0   名前： ひないし ： 2007/05/01（火） 20:43  ID:jXPMn.dr sub-.G
【何をしたいのか】
あるDIV要素内についてあらゆるブラウザ対応でフェードインさせたい。

【現在の状況】
IEとFirefoxとで動作確認をしており、firefoxではうまく動作するのですが、
IEでは機能せず、フェードイン後の状態が表示されるのみです。
IEに関する部分をいろいろなサイトで確かめたので、スクリプトは間違いないと
思うのですが、全く反応がなく、その理由がさっぱりつかめません。
スクリプト等は以下のとおりです。

【ＣＳＳ】
#content2{
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

【javascript】
var fade = 0;
var interval = 60;
var obj;

function fade_in(){
if(fade <= 10){
obj = document.getElementById("content2");
obj.style.filter = "alpha(opacity=" + (fade * 10) + ")";
obj.style.MozOpacity = fade / 10 ;
obj.style.opacity = fade / 10 ;
fade++;
setTimeout('fade_in()',interval);
}
}

【ＨＴＭＬ】
<body onLoad="fade_in();">
<div id="content2">〜</div>で囲んだ部分をフェードインさせたい。

なお、javascriptのＩＥにかかわる部分を
obj.style.filter.alpha.opacity=fade * 10; や
obj.filters[alpha].opacity=　〜（？）
という風にも書き換えてみましたが、こうするとIEもfirefoxの方も
動作しません。いろいろ見てみましたが、正直、お手上げの状態です。

そこで、気づいていないだけでどこか間違っている箇所があれば、
また目的を満たす他の書き方があればご教授いただきたく投稿した次第です。
よろしくお願い申し上げます。
1   名前： 匿名 ： 2007/05/01（火） 20:43  ID:gFY2524F sub-Q5
こんにちは

手っ取り早い方法で宜しければ
#content2{
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
に
widthを設定して下さい。
とりあえず
IE7では動くようになりました。
2   名前： 匿名 ： 2007/05/01（火） 20:43  ID:uR8UqwGx sub-Cz
>>0
>>1 が言うように、IE の filter を使用するときはブロック要素に width/height あるいは position を指定しなきゃいけない。

それよりも、スクリプト内で filter にアクセスするときは try..catch しておくようにしよう。
function fade_in(){
    try {
        ...
        
    } catch (error) { ; }
}
3   名前： ひないし ： 2007/05/01（火） 20:43  ID:jDUlubv7 sub-.G
迅速なご回答、恐縮であります。

早速、ご両人の意見を踏まえて書き換えました結果、無事、ＩＥでも作動できました。
確かあるサイトで、widthやheightを設定しなければＩＥでは動かないという文章を
見たような気もしましたが、スクリプトのほうに気を取られていたため無意識のうちに
無視していたようです。
widthの設定だけでも動きましたが、念のため、heightや>>2さんの示された
スクリプトも書き加えました。try〜catchというのは初めて目にし、ひとつ勉強させて
いただきました。

ご両人方々へは厚くお礼申し上げます。ありがとうございました。
また他日質問いたしました際は、なにとぞよろしくお願いいたします。

一覧へ戻る