0

CSS でシンプルなボックスを作成しました。setInterval オブジェクトを使用して不透明度を動的に変更してフェードしようとしています。

http://jsfiddle.net/5gqRR/7/

CSS

#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}

ジャバスクリプト

var fade;
function select(id) {
    return document.getElementById(id);
}
function disBox() {
    fade=setInterval(function(){
        select("box").style.opacity-=0.1;   
    },300);
    if (select("box").style.opacity==0) {
        clearInterval("fade");
        select("box").style.display="none";
    }   
    else {
        select("box").style.display="block";    
    }
}

問題は、「-=」演算子が 1 ではなく 0 から不透明度を減算し始めることです。なぜこれが起こるのか説明してもらえますか?

4

2 に答える 2

3

不透明度に関するチェックはループ内にある必要があります。

function select(id) {
    return document.getElementById(id);
}


// Run at loading
window.onload = function () {
    // Preload variables
    var box = select('box'), opacity = 1, fade;

    // Looping
    fade = setInterval(function(){
        // Calculate and applying opacity
        opacity = Math.max( 0, opacity - 0.1 );
        box.style.opacity = opacity;

        // Stoping loop when box isn't visible
        if ( !opacity )
            clearInterval(fade);
    },30);
};

デモ: http://jsfiddle.net/5gqRR/8/

于 2012-09-13T19:11:37.567 に答える
1

要素にonloadイベントを設定することはできません。divその代わりに、次のことができます。

HTML

<div id="box"></div>

JavaScript

var fade;
function select(id) {
    return document.getElementById(id);
}
function disBox() {
    fade = setInterval(function(){
        select("box").style.opacity-=0.1;    
    },300);
    if (select("box").style.opacity==0) {
        clearInterval("fade");
        select("box").style.display="none";
    }    
    else {
        select("box").style.display="block";    
    }
}

window.onload = (function() {
    disBox();
})();

デモ

編集によると

select("box").style.opacity = 1;  // add this line to set initial opacity
fade = setInterval(function(){
            select("box").style.opacity-=0.1;    
        },300);
于 2012-09-13T18:25:01.050 に答える