2

非表示の div を配置して表示し、アニメーションで回転させようとしています。

これは私がこれまでに得たもので、まったく回転していないようです...

$(this).css({ 'left' : randomNum(offsetStartX, offsetEndX),
    'top' : randomNum(offsetStartY, offsetEndY) });
$(this).show("fast");
var cssObj = {
    msTransform: 'rotate(\'+ rotDegrees + \'deg)',
    '-moz-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    '-webkit-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    '-o-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    'transform' : 'rotate(\'+ rotDegrees + \'deg)' };
$(this).animate(cssObj, "slow");

と の CSS を に配置するとleft、うまく回転します。ただし、配置してから表示に設定し、アニメーションで回転させる必要があります。topvar cssObj

これどうやってするの？

4

1 に答える 1

2

この質問を確認してください。受け入れられた回答です。jQueryanimateは数値以外のプロパティをアニメーション化できないためrotate(...)、値としての使用はサポートされていません。stepただし、 (任意の値をアニメートし、各ステップで異なる回転を設定する) でそれを行うことができます。

$(this).show("fast",function() { 
    var element = $(this);
    var startDegree = 90;
    var endDegree = 0;
    $({ i:startDegree }).animate({ i: endDegree }, {
        step: function(now,fx) {
            var cssObj = {
                msTransform: 'rotate('+ now + 'deg)',
                '-moz-transform' : 'rotate('+ now + 'deg)',
                '-webkit-transform' : 'rotate('+ now + 'deg)',
                '-o-transform' : 'rotate('+ now + 'deg)',
                'transform' : 'rotate('+ now + 'deg)' };
            element.css(cssObj); 
        },
        duration:500
    },'linear');
});

コールバックで回転アニメーションを開始したことに注意してくださいshow- そのため、要素の表示が終了した後にのみ回転が開始されます。

このフィドルは、コードと他の質問の回答で提供されているサンプル コードをマージして作成されました (また、他のブラウザーもサポートするように拡張されています)。ソースの角度からターゲットの角度への回転が発生するように調整する必要があります (変数startDegreeおよびを使用endDegree)。

于 2013-03-03T01:11:57.480 に答える