IEの透過PNG表示テスト用

RELEASE- 2011年11月16日 3:02 PM

UPDATE - 2012/02/03 13:14

IEがある限り、PNG＋JSの時代ってなかなか来ないんですよね。
PNG透過表示は出来るのですが、その画像を動かすとなると話は違うんです。

今回はその現象を検証してみます。
「このページはIEで見てください。」
まさかこんな事を言う日がくるとは。。。

準備

今回はjpegの上にpngを載せるので、下記の画像を使用します。

jpeg画像

png画像

実験１.ただのせてみる

JS抜きでただのせてみます。

[CSS]
.img1{
position:absolute;
width:300px;height:200px;
left:0px;top:0px;
}
.img2{
position:absolute;
width:107px;height:37px;
left:10px;top:140px;
}

実験2.動かしてみる

次はjQueryで動かしてみます。

[JS]
var mTarget = $("#jikken2 .img2");
mTarget.animate({left:"+=30px"},2000);

MOVE!

実験3.動かしてみる透明

透明状態から動かしてみます。

[JS]
var mTarget = $("#jikken3 .img2");
mTarget.animate({opacity:0},500)
	.animate({opacity:1,left:"+=40px"},2000);

MOVE!

はい、おかしいぃ

そうなんです、IEでみると「origami」の周りに変な黒いのがつきます。
これを何とかクリアするために次の実験に行きましょう。

実験4.動かしてみる透明(filter)

filterを使ってちょっとトリッキーなことしてみます。

[CSS]
.img2{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE 6 & 7 */      
zoom: 1;
}

[JS]
var mTarget = $("#jikken4 .img2");
mTarget.animate({opacity:0,filter:""},500)
	.animate({opacity:1,left:"+=40px",filter:""},2000);

MOVE!

消えないし

消えないし、移動中も変だし。
不確かな記憶ですが、jQuery1.4.2あたりを使用すると、ちょっとはマシだった気がします。
（ここは1.6.2を使用しています。）
ちなみにJS内の filter:”"を消しても変です。

実験5.拡大縮小

次はjQueryで拡大縮小してみます。。

[JS]
var mTarget = $("#jikken5 .img2 img");
mTarget.animate({width:"-=50px"},1000).animate({width:"+=50px"},1000);

MOVE!

意外や意外、うまく表示されています。

実験6.回転

次はjquery.rotate.jsで回転してみます。

[JS]
var mTarget = $("#jikken6 .img2 img");
mTarget.rotate(10);

MOVE!

＊一回しか回転しません。
うんこ野郎ですね。黒い枠がついています。

結論

ただ動かすだけなら、IEでも結構表示できます。
フェードインとかつかうなら、諦めるか、妥協するかってところでしょうか
グローは避ける

事実上、仕事では使えないよねこんなの

twitter:@wada

IEの透過PNG表示テスト用 | wadadanet