Edited at

animateで複数のプロパティと同時にtransformの値も変化させる

animateで回転を付ける時には、あまり見え方に影響のないプロパティ(z-indexなど)を0から1にした値をstepで取得して、必要な値になるよう乗算し、cssでtransform:rotate()の中に連続的に格納するという方法が一般的だと思うけど、回転以外の動きも同時につける方法が見つからなかったので、やってみました。


jquery

$('#target').css({

top:'10px',
left:'10px',
opacity:'0',
}).stop().animate({
top:'100px',
left:'200px',
opacity:'1',
dummyprop:'45'//ステップ用のダミープロパティを設定(初期値は0となる様子)
},{
duration:1000,
step:function(s,n){
if(n['prop']=='dummyprop'){//n['prop']でanimateしているプロパティ名を取得できる
//console.log(s);//dummypropの変化が取得できる
$(this).css('transform','rotate('+s+'deg)');
}
}
});


  • dummypropは$('#target')のどこかに格納されるようで、再度animateする時は変化した後の値(例の場合は45)からスタートとなる。

  • 上記はダミープロパティ名をdegとかにしておいた方が保守性は高そう。

  • dummypropは複数設定できる。

  • 上記ではcssでまず初期化みたいなことをしているけど、ここにdummypropで初期値を設定しようとすると、おかしな挙動になる。

dummypropなんていう変なものを設定するのが嫌な時は、やっぱりz-indexあたりをanimateさせて、stepのなかでn['prop']=='z-index'で変化値を取得するのが良いかもしれない。step:function()の第二引数を取得することで、欲しいプロパティの値を選べるのがミソ。