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とかなくなったらいいのに。