纯javascript-创建我自己的淡出功能

我试图创建一个类似于纯javascript中jquery

.fadeOut（）效果的函数，但是我的代码有问题。错误代码：

span[0]。淡出效果不是一个函数

我的代码：


var span=document.querySelectorAll（“span”）；
函数淡出效果（）{
var node=this
var fadeEffect=setInterval（函数（）{
如果（！node.style.opacity）{
node.style.opacity=1；
}
如果（node.style.opacity>0）{
node.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 50);
}
span[0]。淡出效果（）
一二三
您的代码试图调用DOM元素上不存在的函数。尝试将元素作为参数传递给函数


var span=document.querySelectorAll（“span”）；
功能淡出效果（节点）{
var fadeEffect=setInterval（函数（）{
如果（！node.style.opacity）{
node.style.opacity=1；
}
如果（node.style.opacity>0）{
node.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 50);
}
衰减效应（跨度[0]）
123span
您正试图将函数作为属性添加到
span
元素数组中。您应该将其作为参数传递给您创建的函数。另外，
document.queryselectoral（“span”）
返回一个跨度数组，因为HTML文档中可能有多个跨度，所以您可以循环遍历每个跨度并将代码应用于它们

见工作示例：


功能淡出效果（节点）{
forEach（函数（节点）{//在跨度数组中通过每个节点（每个跨度）循环
var fadeEffect=setInterval（函数（）{//运行代码
如果（！node.style.opacity）{
node.style.opacity=1；
}
如果（node.style.opacity>0）{
node.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 50);
});
}
var nodes=document.querySelectorAll（“span”）；//节点是一个跨度数组
淡出效果（节点）；//将跨度数组传递给函数
你好，世界当我阅读您的代码时，我发现您可能希望向HtmleElement原型添加一个函数-不建议这样做，但它看起来是这样的：


HTMLElement.prototype.FadeOutfect=function（）{
var node=this
var fadeEffect=setInterval（函数（）{
如果（！node.style.opacity）{
node.style.opacity=1；
}
如果（node.style.opacity>0）{
node.style.opacity-=0.1；
}否则{
清除间隔（fadeEffect）；
}
}, 50);
}
var span=document.queryselectoral（“span”）；
span[0]。淡出效果（）
1233
您创建了一个函数，但它不会神奇地成为每个
元素的属性。为了详细说明Pointy的注释，如果您想淡出
span[0]
，您可能会想将该元素作为参数添加，如
函数淡出效果（元素）{…}
并通过
淡出效果（span[0]）调用它。