こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

Firefoxとクロームでフェードインにならない

横並びの画像を3枚時間差でフェードイン(左から順に表示)させたいのですが、
IEでは問題無く動くのですがFirefoxとGoogle Chromeではフェードインにも透過にもならず画像がそのままパっとでてしまいます・・。

FirefoxとGoogle Chrome対策ソース、他に良い方法などございましたら
ご教授いただけますでしょうか。宜しくお願いいたします!


<script type="text/JavaScript"> // 画像のフェードイン・フェードアウト
var myspd = 5; // 変化する速さ(ミリ秒単位)
var myx = 10; // 何%ずつ変化させるか
var mypic = new Array("px1","px2","px3"); // 画像のname(順番に並べる)
var mycnt = 0;
var myp = 0;

function mygo() {
document.images[mypic[myp]].filters['alpha'].opacity = mycnt;
mycnt += myx;
if(mycnt >= 100) {
mycnt = 0;
myp++;
}
if(mypic.length <= myp) return;
setTimeout("mygo()",myspd);
}
</script>


【HTML】


<ul>

<li><img src="image/mainpx_01.jpg" name="px1" width="365" height="484" style="display: inline; filter:alpha(opacity=2);" /></li>

<li><img src="image/mainpx_02.jpg" name="px2" width="365" height="484" style="display: inline; filter:alpha(opacity=0);" /></li>

<li><img src="image/mainpx_03.gif" name="px3" width="270" height="484" style="display: inline; filter:alpha(opacity=0);" /></li>

</ul>

投稿日時 - 2012-10-01 10:08:54

QNo.7726276

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

理由としては、
>filters['alpha'].opacity
はIE専用のコードなので、たのブラウザは対応していないから。


一般的なブラウザではcssのopacityを設定することで、透明度を変えられます。

http://miyana2m.blog2.fc2.com/blog-entry-341.html
http://www.webbibo.com/blog/htmlcss/opacity.html
http://www.ne.jp/asahi/hatakeyama/design/csslayout/kowaza/index06.html

投稿日時 - 2012-10-01 15:26:00

補足

ありがとうございます。
CSSでの対応の仕方はわかるのですがJSでの対応のソースの
書き方がわかりません・・。
初心者なもので・・
ご教授いただければ有難いです・・!

投稿日時 - 2012-10-02 14:35:52

お礼

一度打ち切りまして新しく立ち上げなおしますね~!
ありがとうございました!

投稿日時 - 2012-10-02 15:35:48

あなたにオススメの質問