我想单击一个 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
最佳答案
我认为您的第一个函数有一些错误。试试下面这样的东西,看看它是否更适合你。
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 根据位置淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11889645/