0

ここに私のコードがあります

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #box {
        width: 300px;
        height: 300px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="main.js"></script>
</html>

JavaScript

var box = document.getElementById('box');

function changeColor() {
    box.style.width = "600px";
    box.style.height = "600px";
    box.style.background = "red";
}

box.onclick = setInterval(changeColor, 5000);

ご覧のとおり、一瞬で変わります。ボックスのサイズと色を変えていますが、徐々に変えていきたいです。私はJqueryで簡単にできることを知っていますが、Javascriptで自分のスキルをさらに高めようとしています.どんなアドバイスも役に立ちます.みんなとギャルに感謝します.

4

1 に答える 1

2

JavaScript アニメーションの基本的な前提は再帰です。アニメーション要素には「フレーム」が必要です。単一のフレームには、次のシーケンスになるまでタイムアウトが必要です。これが、再帰が有益な理由です。

注: この関数は div のアニメーションを停止しません。 setTimeout() の設定を停止するには、条件付きコードを挿入する必要があります。

function moveEl(el)
{
    var left = parseInt(el.style.left) || 0;

    el.style.position = 'relative';
    el.style.left = (left + 1) + 'px';

    // Recursive timeout to move the element left 1px every 20ms
    setTimeout(function(){
        moveEl(el);
    }, 20);
}

var el = document.getElementById('box');

// Start the animation
moveEl(el);

jsFiddle の例

これにより、カスタム アニメーション コードを作成できるようになるはずですが、私はこれを学習課題として扱います。jQuery のアニメーション技術は非常に強力で、ブラウザ間の互換性があり、同じ効果を実現するために組み合わせたカスタム コードよりもはるかに便利です。

色間のアニメーション化:

色間をスムーズにアニメーション化するのは少し難しいです。上記の手法を使用する場合、2 つの色間で 16 進数のカラー コードを大量に使用して、一方の色から他方の色にスムーズに移行する必要があります。幸いなことに、最新のブラウザーでは、1 つの要素の不透明度を 0 までアニメートすることができますが、その下の要素の単色は、1 つの要素がアニメートされたかのように表示されます。ここでも、jQuery には IE7 や IE8 などをfadeIn()andfadeOut()関数でサポートする方法がいくつかあります。

于 2013-04-02T16:01:42.500 に答える