0

別のdivのオンクリックでdivをフェードしてから、それを非表示にするか、divでフェードインする最も簡単な方法を探しています。前もって感謝します。

4

2 に答える 2

1

これは素晴らしい JavaScript フェードアウト効果です:

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

「Hello World!」という div のフェードインとフェードアウトを使用した実際の例を次に示します。

<html>
<script>
function animator(element) {
    this.el = element;
    this.state = 0;
    this.fadeout = function() {
        var element = this.el;
        var op = 1;
        var timer = setInterval(function () {
            if (op <= 0.0) {
                clearInterval(timer);
            }
            element.style.opacity = op;
            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
            op -= 0.1;
        }, 50);
    };
    this.fadein = function() {
        var element = this.el;
        var op = 0.0;
        var timer = setInterval(function () {
            if (op >= 1.0) {
                clearInterval(timer);
            }
            element.style.opacity = op;
            element.style.filter = 'alpha(opacity=' + op * 100 + ")";
            op += 0.1;
        }, 50);
    };
}
function initfader() {
    show = new animator(document.getElementById("div1"));
}
</script>
<body onload="initfader();">
    <div id="div1">
        <h2>Hello World!</h2>
    </div>
    <input type="button" onclick="show.fadein();" value="in" />
    <input type="button" onclick="show.fadeout();" value="out" />
</body>
</html>
于 2013-11-04T23:14:16.963 に答える
0

「トランジション」と呼ばれる CSS プロパティがあります:
JavaScript なしで動作します!
クリックの代わりに :hover を使用してもかまわない場合。
これは、:hover 効果と別の要素内の画像の例です。

ベンダー プレフィックスも忘れないでください。そのため、これが多くの古いブラウザでも機能することを確認してください! 

/* Normal */
a img {
opacity: .6;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}

/* ":hover" */
a:hover img {
opacity: 1;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}
于 2013-11-04T23:14:04.470 に答える