Javascript div 根据位置淡入淡出

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 方法会为您处理。