更新:Chrome 23で修正されたようです(元の質問の@joequincyコメントを参照してください)
確かに、これはバグのようです。animate()
修正されるまで、次のようにjQuery関数を回避できます。
$(function() {
var rotation = 163;
$('body').on('click', function() {
rotation = (rotation == 163) ? 198 : 163;
$('#wheel').animate({
borderSpacing: rotation
}, {
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
$(this).css('-moz-transform', 'rotate(' + now + 'deg)');
$(this).css('-ms-transform', 'rotate(' + now + 'deg)');
$(this).css('-o-transform', 'rotate(' + now + 'deg)');
$(this).css('transform', 'rotate(' + now + 'deg)');
}
});
});
});
CSSステートメントを削除し、transition
以下を追加します。
border-spacing: 163px;
border-spacing
この例では、ほとんどの場合レイアウトに影響を与えないため、属性を誤用しています。
http://jsfiddle.net/hongaar/wLTLK/1/を参照してください
(この回答のおかげで:アニメーション要素変換回転)
注:オプションで、jQuery変換プラグインを使用して、醜い複数のcss()
呼び出しを削除し、構文をより単純なバージョンにすることができanimate()
ます(ただし、オーバーヘッドが追加されます)。https://github.com/louisremi/jquery.transform.jsを参照してください