18

背景画像の単純なフェードインとフェードアウトが JQuery と CSS3 を使用しない JavaScript でのみ機能するように、私は本当に頭を絞っています。JqueryでfadeIn（）とfadeOut（）を呼び出すのがいかに簡単かを知っています。残念ながら、私が取り組んでいる私のプロジェクトでは、Jquery をサポートしていません。参考までに、IE6 からのアニメーションをサポートしたいと思います。

リンクをクリックすると、対応する div の背景が以前の既存の背景からフェードインおよびフェードアウトします。setinterval に基づいて機能させようとしていますが、できませんでした。

function handleClick(evt){
    var element = document.getElementsByClassName(evt.target.id);
    fade(element);

}
 function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

</p>

http://jsfiddle.net/meetravi/2Pd6e/4/

4

8 に答える 8

10

getElementById1 つの要素 (または null) をgetElementsByClassName提供し、配列を提供します。

function handleClick(evt){
    var element = document.getElementById(evt.target.id);
    fade(element);

}

あなたはIDの使用を目指しているようですので、これはあなたのニーズに答えるはずです. 全体を更新しました：ID

ただし、このフェード方法は、GPU で高速化されたトランジションを使用するよりもはるかにコストがかかることに注意してください。

JSfiddle Webkit の不透明度フェードの更新

于 2012-12-05T23:01:16.100 に答える
7

IE7 ～ IE9 を気にしない場合は、次のような非常に便利な CSS3 トランジションを使用できます。

    .element {
        -webkit-transition: opacity 0.3s ease;
    }
    .element[faded=true] {
        opacity: 0;
    }

jQuery を使用しなくても、非常に高速でネイティブなフェードアウト効果が得られます。

更新: 申し訳ありませんが、質問のタイトルをよく読んでいませんでした。

于 2012-12-05T23:06:54.883 に答える
3

element.style正しいオブジェクトを参照していないため、未定義です。関数呼び出しに使用element[0]します。

function handleClick(evt){     
    var element = document.getElementsByClassName(evt.target.id);
    fade(element[0]);        
}

フィドル


補足: console.log() とある種の開発者コンソール (Chrome に含まれているものなど) を使用すると、デバッグに驚くほど効果があります。

于 2012-12-05T22:57:36.877 に答える
2

最新のブラウザーはすべて CSS3 をサポートしているため、実際には CSS3 を介してこれを行う必要があります。古いブラウザーの場合は、表示/非表示を使用するようにフォールバックします。これを行うには、「fadeOut」クラスを追加するか、JavaScript で削除します。CSS3 (トランジション) は、古いブラウザーの非表示と表示を含め、他のすべてを処理します。

注意: 可能な限り、JavaScript で行う前に CSS で行うようにしてください。CPU だけでなく GPU (ビデオ カード) を強化することが多いため、クリーンで保守が容易になるだけでなく、CSS3 アニメーションのレンダリングがよりスムーズになります。これは、モバイル デバイスでは特に重要ですが、あらゆるデバイスでこれを行うための標準的で最新の方法です。

詳細については、この Opera 記事を参照してください: http://dev.opera.com/articles/view/css3-show-and-hide/

于 2012-12-05T23:04:30.723 に答える
1

正しい方向にあなたを指摘し、残りのコーディングはあなたに任せます。

これが setInterval() 関数の仕組みです。実行するには関数が必要であり、次に実行する必要があるミリ秒が必要です。

setInterval(function() {
    if(fade(element[0]))
        clearInterval();
}, 50);

ここで JS フィドルを作成しました。これは半完成ですが、フェードアウト/フェードインを作成する方法を示しています。これは、Mac 上の Chrome でテストされています。残念ながらFFもIEもわかりません。

また、何人かが指摘したように、で終わる関数で何かを取得するsと、要素を持つ配列が得られることを100％確信できるため、必要な要素をそのように参照する必要があります。あなたの場合、そのelement[0].

少しでもお役に立てば幸いです！：） 幸運を！

于 2012-12-05T23:28:04.380 に答える
0

@Raptor007 の機能を修正しました

if (!Element.prototype.fadeIn) {
    Element.prototype.fadeIn = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        this.style.opacity = 0;
        this.style.filter = "alpha(opacity=0)";
        this.style.display = "inline-block";
        this.style.visibility = "visible";

        let $this = this,
            opacity = 0,
            timer = setInterval(function() {
            opacity += 50 / ms;
            if( opacity >= 1 ) {
                clearInterval(timer);
                opacity = 1;

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

if (!Element.prototype.fadeOut) {
    Element.prototype.fadeOut = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        let $this = this,
            opacity = 1,
            timer = setInterval( function() {
            opacity -= 50 / ms;
            if( opacity <= 0 ) {
                clearInterval(timer);
                opacity = 0;
                $this.style.display = "none";
                $this.style.visibility = "hidden";

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

使い方：

// fadeIn with default: 400ms
document.getElementById(evt.target.id).fadeIn();

// Calls the "alert" function with the message "done!" after 400ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(alert);

// Calls the "alert" function with the message "done!" after 1500ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(1500, alert);

JSfiddle フェードイン/フェードアウトの例

于 2021-03-21T07:32:37.567 に答える