2

divをクリックして、それと他のdivを次々とフェードアウトさせたいです。1 つの div フェードと次の div フェードの間の時間を、div 間の距離に比例させたいと考えています。

これらの div はすべて、より大きな div の子です。

div をフェードするコードがあります。私は今、親divの幅を各ピクセルで見て、それらに遭遇したときにdivをフェードさせる関数を書き込もうとしています。

これがJavaScriptです：

function sweep(){
    var n3_position = #note_3.position();
    for (i=0;i<900;i++){
        if n3_position.left == i {
            fade('note_3');
        }
    }
}
function fade(el){
    setTimeout(function(){
        $(el).fadeOut("slow",function(){
            document.getElmentById(el).style.display="none";
        }); 
    }, 100);
}

関連する HTML は次のとおりです。

<a onclick="sweep()"><div id="note_1"></div></a>

したがって、最初の音符 (div は音符です) をクリックすると、for ループ変数 i が 3 番目の音符の左側の x 位置に等しくなると、3 番目の音符がフェードします。最終的には、sweep() はすべての div 位置の変数を作成し、それぞれをチェックしますが、今のところ、テストのため、これだけです。親 div の幅は 900px であるため、これが for ループの上限の理由です。

今起こっていることは何もありません。

すべての助けに感謝します。あなたの専門家の助けを事前に感謝します。

-Oijl

4

1 に答える 1

0

最初の関数にエラーがあると思います。以下のようなことを試して、それがあなたにとってより良いかどうかを確認してください.

function sweep(){
    var n3_position = document.getElementById('note_3').offsetLeft;
    for (i=0;i<900;i++){
        if (n3_position == i) {
            fade('note_3');
        }
    }
}

ループ内の if 条件の周りに括弧がありませんでした。また、 #note_3 は要素を返さないため、有効ではありません。

さらに、2 番目の関数にはいくつかのエラーがあります。これは、あなたが始めるのに役立つはずのものです：

function fade(el){
    setTimeout(function(){
        $('#' + el).fadeOut("slow");
    }, 100);
}

ID で要素を参照しているため、必要な「#」がありませんでした。さらに、表示スタイルを none に変更する必要はおそらくありません。これは、fadeOut メソッドが処理してくれるからです。

于 2012-08-09T18:42:48.640 に答える