1

私はこれでいくつかのcssスタイルをアニメーション化しています:

$(".left").animate({
    left: '300px',
    width: '300px',
    height: '300px',
    top: '25px'
}, 1000,'easeInOutQuint', function() {
});

プロパティを追加しようとしましたtransformが、機能していないようです。解決策はありますか？ フィドル

4

3 に答える 3

1

次のように、変換プロパティに引用符を追加する必要があります。

$(".left").animate({
    '-webkit-transform': 'rotate(180deg)',
    '-moz-transform': 'rotate(180deg)',
    '-ms-transform': 'rotate(180deg)',
    '-o-transform': 'rotate(180deg)',
    'transform': 'rotate(180deg)'
});

編集：これをテストしたところ、機能していないことがわかりました。どうやらjQueryは「アニメーション」機能でCSS3タグをサポートしていません。他の誰かがより良いアイデアを持っていない限り、おそらくプラグインが必要です。

于 2013-02-11T09:09:13.870 に答える
0

最良の解決策、および私の場合に機能した解決策は、ここで見つけることができるローテーション用の小さな jQuery プラグインを使用することでした。

于 2013-03-12T12:24:58.343 に答える
0

これを行う 1 つの方法は、text-indent などの使用されていないプロパティを追加してから、その値をインクリメントすることです。css クラス '.last' の text-indent に何らかの値を設定します。以下のコードサンプルを確認してください。

$('.left').animate({
    left: '300px',
    width: '300px',
    height: '300px',
    top: '25px',
    textIndent: '0px'
},
{
    step:function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    }
});

これで問題が解決することを願っています。または、単純に css3 アニメーション プロパティを使用することもできます。

于 2013-02-11T09:16:48.410 に答える