重复javascript函数onclick

我是一个彻头彻尾的傻瓜，需要一些关于函数的帮助，我想对你们大多数人来说，这个函数会很简单。我试图用纯Javascript而不是JQuery来实现这一点。我已经试了好几个小时了，但还是弄不到

我试图实现的是每次单击链接时都重复一个函数

更具体地说，我目前有文本淡入时，点击一个链接，我希望它总是执行淡入时，我点击它（好像你要刷新页面）

基本上：单击链接（x）——文本淡入——单击链接（x）——相同的文本消失，然后从过渡/动画开始淡入（无淡出）——重复

我在W3学校遇到过类似的情况，每次单击按钮时都会显示一个从头开始的函数：

我原以为修改它就是答案，但因为我试图更改不透明度，我看到我必须向函数添加parseFloat，因为它是一个字符串，但我没有成功。例如：

else{i.style.opacity=parseFloat（i.style.opacity）+.1；}

为了在工作中使用另一个扳手，我使用颜色：rgba（0,0,0,0）中的不透明度值来更改不透明度。我认为这可能更容易找到，因为上面的示例（在我看来）将绕过parseFloat，因为您将使用I.style.color，但我找不到任何东西

下面是我基于W3学校教程的一个变体编写的代码。我很确定JS中的clearInterval在我需要的东西中扮演着重要角色。非常感谢您为此提供的任何帮助，如果您需要更清晰的信息，请告诉我：）

#关于{
颜色：rgba（10,10,10,0）；
过渡：颜色1s线性1s；
}
#关于：目标{
颜色：rgba（10,10,10,1）；
过渡：颜色1s线性1s；
}    
请帮我弄清楚这件事。我真的很感激
函数fadeIn（）{
var elem=document.getElementById（“关于”）；
var-begin=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（开始==100）{
清除间隔（id）；
}否则{
begin++；
elem.style.color=begin+'1'；
}
}
}

有一个解决方案，我不打算向您介绍，因为与CSS技巧相比，JS“hack”需要更长的时间：（寻找合适的参考）

您将想要淡入淡出的物品包装到一个容器中（只是确保）并在其上方添加一个复选框：

<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>

然后在第二个输入之前添加带有伪选择器的输入id：

#about:checked + #about_container

在你的开启模式下，让另一个保持原样

更好更快的解决方案

你也应该把你的问题变成这样：

---

如何使html元素在鼠标单击或其他用户交互时出现和消失。

有一个解决方案，我不会向您介绍，因为与CSS技巧相比，JS“hack”需要更长的时间：（寻找适当的参考）

您将想要淡入淡出的物品包装到一个容器中（只是确保）并在其上方添加一个复选框：

<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>

然后在第二个输入之前添加带有伪选择器的输入id：

#about:checked + #about_container

在你的开启模式下，让另一个保持原样

更好更快的解决方案

你也应该把你的问题变成这样：

---

如何使html元素在鼠标单击或其他用户交互时显示和消失。

您可以使用过渡，然后将不透明度设置为0.5，并在一些毫秒后将其更改为1，使其在单击时褪色并以旧的外观返回

编辑：

只需将fadeIn（）放在另一个函数中，在fadeIn（）执行之前，将不透明度设置为0

编辑：

JS

HTML

---

您可以使用过渡，然后将“不透明度”设置为0.5，并在几毫秒后将其更改为1，使其在单击时褪色，然后以旧外观返回

编辑：

只需将fadeIn（）放在另一个函数中，在fadeIn（）执行之前，将不透明度设置为0

编辑：

JS

HTML

NO-JS示例：样式变换器：显示更多功能：消失菜单：刚刚尝试过，但不是这样。不过我很喜欢：）谢谢，如果你真的“需要”一个函数在点击时进行处理，并且根据某些状态采取不同的行动：定义状态（伪属性或类），然后从函数内部检查状态并决定它。。。但不要将其用于样式设置（消失菜单等）NO-JS示例：样式更改器：显示更多功能：消失菜单：只是尝试了一下，但不是这样。不过我很喜欢：）谢谢，如果你真的“需要”一个函数在点击时进行处理，并且根据某些状态采取不同的行动：定义状态（伪属性或类），然后从函数内部检查状态并决定它。。。不过，不要将其用于造型（消失的菜单等），谢谢您的回复。不过我应该更清楚一点。这应该在单击一次后发生。因此，理论上，不应该有淡出，而是应该重新启动功能。我问题中的W3学校示例是我能找到的最接近的例子。因此，如果我理解，您需要单击时淡入淡出，但您希望它将不透明度恢复为1而不产生淡入淡出效果？因此，单击链接时，不透明度从0变为1。当再次单击同一链接时，理想情况下，它应该从0不透明度开始，然后转到1-完全相同。在再次执行转换之前，文本应该基本上消失一段时间。我想这是通过设置间隔和清除间隔完成的，但我真的不知道。如果你想看一下，这应该是你需要的解决方案。嗨，马可，我尝试了我认为可能是正确的方法，但说实话，我不太清楚你的意思。我对这一切都很陌生，所以请容忍我。如果不太麻烦的话，你介意给我看看吗？谢谢你的回复，马可。我应该说清楚一点

doIt = function() {
document.getElementById("about").style.color = begin + '0';
fadeIn();
}

<a href="#about" onclick="doIt()">About</a>