6

<div>（利用可能なJavaScriptライブラリの一部を使用せずに）一定時間後にフェードアウトするための最良の方法は何ですか。

巨大なJavaScriptライブラリをブラウザに送信する必要のない非常に軽量なソリューションを探しています。

4

6 に答える 6

12

jQueryのようなものを使用することに反対する理由はわかりません。これにより、この効果を簡単に達成できますが、基本的には、-moz-opacity、opacity、およびfilter：alphaCSSルールに対する一連の変更をラップする必要があります。 setTimeout（）で。

または、jQueryを使用して、fadeOut（）呼び出しをsetTimeoutでラップします。あなたの選択。

于 2008-09-23T21:58:38.240 に答える
4

これを行うJavaScriptがいくつかあります。どこかのJavaScriptチュートリアルWebサイトで見つけて（もう一度見つけることができませんでした）、修正しました。

var TimeToFade = 200.0;

function fade(eid)
{
    var element = document.getElementById(eid);
    if(element == null) return;

    if(element.FadeState == null)
    {
        if(element.style.opacity == null || element.style.opacity == ''
               || element.style.opacity == '1') {
            element.FadeState = 2;
        } else {
            element.FadeState = -2;
        }
    }

    if(element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    } else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime()
           + ",'" + eid + "')", 33);
    }
}

function animateFade(lastTick, eid)
{
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if(element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        element.style.display = "none";
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft/TimeToFade;
    if(element.FadeState == 1) {
        newOpVal = 1 - newOpVal;
    }

    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

次の html は、その仕組みを示しています。

<html><head>
    <script type="text/javascript" src="fade.js"></script>
</head><body>
    <div id="fademe" onclick="fade( 'fademe' )">
        <p>This will fade when you click it</p>
    </div>
</body></html>
于 2008-09-23T22:23:00.770 に答える
2

最近では、私はいつもそのためにライブラリを使用しています。ライブラリの進歩は驚異的であり、クロスブラウザ機能だけでもそれだけの価値があります。したがって、この回答は非回答です。jQuery はすべて 15kB であることを指摘したいと思います。

于 2008-09-23T21:58:42.590 に答える
0

初期時間で setTimeout を使用してフェード ルーチンをトリガーし、次に setTimeout を低タイマーで使用して、画像がなくなるまで不透明度レベルをステップスルーします。

ただし、jQuery は約 15k まで低下する可能性があり、クライアントの 1 回限りのダウンロードであるため、巨大とは言えません。

于 2008-09-23T22:00:27.407 に答える
0

YUI (Yahoo User Interface) アニメーション ライブラリを試す: http://developer.yahoo.com/yui/animation/

車輪を再発明しないでください。図書館は私たちの友達です。:-)

于 2008-09-24T00:12:41.863 に答える
-2

ライブラリが不足していることは承知していますが、moo.fx を参照することをお勧めします: http://moofx.mad4milk.net/ - 3k のようなものだと思います。

jQueryもかなり小さいです。

于 2008-09-23T21:59:34.117 に答える