基于位置的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 引用元素。此外，您可能不需要将显示样式更改为 none，因为 fadeOut 方法会为您处理。