JavaScript と CSS を使用したフェードインおよびフェードアウト

HTML 要素のフェードインおよびフェードアウト効果を作成すると、 Web アプリケーションの視覚的な魅力。ただし、これらの効果の実装は、特にフェードイン機能が正しく動作していない場合に困難になることがあります。

以前の実装では、フェードイン機能は期待どおりに要素の不透明度を増加させませんでした。代わりに、0.1 で固定されたままになりました。この問題に対処するために、より効率的なメソッドを提供します。

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity='   op * 100   ")";
        op  = op * 0.1;
    }, 10);
}

この関数は、初期不透明度 0.1 から始まり、1.0 に達するまで徐々に不透明度を増加させ、スムーズなフェードイン効果をもたらします。

フェードアウトの場合、上記のコードを置き換えます。 with:

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
この関数は、0.1 に達するまで不透明度を継続的に減少させ、要素を非表示にして目的のフェードアウト効果を作成します。
setInterval または潜在的なセキュリティリスクによる setTimeout。