Question

我想点击一个div并让它和其他div一个接一个淡出。我希望一个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>

因此，一旦for循环变量i等于第三个音符左侧的x位置，单击第一个音符（div是音符）会导致第三个音符淡入淡出。最终，sweep（）将为所有div位置创建变量并检查它们中的每一个，但是现在，为了进行测试，它只是这一个。父div的宽度为900px，因此这就是for循环上限的原因。

现在发生的事情一无所获。

感谢所有帮助。提前感谢您的专家帮助。

-Oijl

Answer 1

我认为你的第一个功能有一些错误。尝试下面的内容，看看它是否适合你。

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不会返回元素，因此它无效。

此外，第二个功能中存在一些错误。以下内容应该可以帮助您入门：

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

由于您通过Id引用元素，因此您缺少所需的'＃'。此外，您可能不需要将显示样式更改为无，因为fadeOut方法正在为您处理。

Javascript div根据位置淡出

1 个答案: