3

360 度回転するときにフェードインする div (基本的には画像のみ) がいくつかあります。IE だけでなく、すべての主要なブラウザーですべてが完全に機能します。

動作する CSS3 コード

#box
{
    width: 400px;
    height: 400px;
    display: inline-block;
    position: absolute;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transition: all 0.8s 1s ease-in-out;
    -webkit-transition: all 0.8s 1s ease-in-out;
    -moz-transition: all 0.8s 1s ease-in-out;
    -o-transition: all 0.8s 1s ease-in-out;
    opacity:0;
}

#box.animate
{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    opacity:100;
}

現在、私のjQueryコードは

$("#box").addClass("animate");

残念ながら、それは私のjQueryの知識の範囲です。関数を使用して不透明度の設定を処理できることはわかっていfadeIn()ますが、回転部分を処理するために何が利用できますか? どのような種類のプラグインを使用することも、実際には最後の手段です。IE9で動作するために必要です。Chrome、FF、および Opera で動作する場合、それも素晴らしいことですが、必須ではありません。

みたいなのありませんか

$("#box").animate(function() {
    $(this).fadeIn(1000).rotate(360);
});

かなり簡単な解決策だと思いますが、どうすればよいかわかりません。また、そのコードが有効かどうかもわかりません。私は JS の第一人者ではありません。

4

2 に答える 2

1

jquery のステップ関数によって解決される問題のように聞こえます。プラグインを使用するよりも少し軽量で、不透明度と回転アニメーションをカスタマイズできるはずです。これは、ステップ関数の使用方法に関する優れた投稿です。その投稿から推定すると、次のことがわかりました。

function AnimateRotate(div_id, angle) {
    var $elem = $(div_id);
    $({deg: 0}).animate({deg: angle}, {
        duration: 1000,
        step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
    $({opacity: 0}).animate({opacity: angle}, {
        duration: 1000,
        step: function(now) {
            $elem.css({
                opacity: now
            });
        }
    });
}
于 2013-07-27T05:49:30.153 に答える