Javascript div基于位置褪色

我想点击一个div并让它和其他div一个接一个地淡出。我想要一个div衰落和下一个div衰落之间的时间与div之间的距离成正比。Javascript div基于位置褪色

所有这些divs都是较大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等于第三个音符左侧的x位置。最终，sweep（）会为所有div位置创建变量并检查它们中的每一个，但现在，为了测试，它就是这个。父div是900px宽，所以这是for循环的上限的原因。

现在发生的事情是什么都没有。

所有帮助表示赞赏。提前感谢您的专家帮助。

-Oijl

来源

2012-08-09 Oijl

您的代码存在一些问题。起初你会调用'fade（'note_3'）'，但是在你有'$（el）'的淡入淡出函数中，由于缺少id选择符'＃'，这将不起作用。 – 2012-08-09 18:36:46

我觉得你的第一个函数有一些错误。尝试下面的内容，看看它是否适合你。

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); 
}

你失踪了“＃”，您将需要因为你是通过标识引用的元素。此外，您可能不需要将显示样式更改为无，因为fadeOut方法正在为您处理此问题。

来源

2012-08-09 18:42:48 robbieAreBest

谢谢。我实际上最终使用了一个更简单的解决方案，但是你用一些语法帮助了我。 – Oijl 2012-08-15 01:15:40

Javascript div基于位置褪色

回答

相关问题