2012年12月06日

IE9でjQueryのanimateメソッドでtransformを変更する

IE9はCSS3のtransformに対応しているけどtransitionやanimateには対応していない。jQueryのアニメーションでしなくちゃ行けないけどanimateメソッドはtransformに対応していないということで色々と試行錯誤。

IE9の場合のみ以下の関数を使ってアニメーションを行ないました。

var rotate = function(target,value,duration,callback){
target.animate(
{borderSpacing:value},
{
complete:callback,
duration: duration,
step: function(now,fx) {
target.css('-ms-transform','rotate('+now+'deg)');
}
}
)
}


次のように作成したrotateを入れ子にして頑張ってアニメーションします。

var time =300
var target = $("hoge");
rotate(target,5,time*0.2,function(){
rotate(target,0,time*0.2,function(){
rotate(target,-5,time*0.3,function(){
rotate(target,0,time*0.3,function(){})
})
})
})


IEとかなくなったらいいのに。


posted by ねこまんま at 23:06 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。