Question

我是一个总菜鸟，需要一些功能的帮助，我认为对你们大多数人来说都很简单。我试图用纯Javascript而不是JQuery来做这件事。我已经尝试了几个小时，但我无法得到它。

我想要实现的是每次点击链接时重复一个功能。

更具体地说，我目前的文字在点击链接时会消失，我希望它在点击它时总是执行淡入淡出（就好像你要刷新页面一样）。

基本上：点击链接（x） - 文字淡入 - 点击链接（x） - 相同文字消失，然后从过渡/动画开始淡入（不淡出） - 重复

我在W3学校遇到过类似的东西，每次点击按钮时都会从头开始显示一个功能：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar

我认为修改这个是答案，但因为我试图改变不透明度，我已经看到我必须在函数中添加一个parseFloat，因为它是一个字符串，但我没有成功。例子是：

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

要在工作中抛出另一个扳手，我使用颜色的不透明度值：rgba（0,0,0,0）来改变不透明度。我认为这可能更容易找到，因为上面的例子会（在我看来）绕过parseFloat的东西，就像你使用i.style.color但我找不到任何东西。

以下是基于W3学校教程变体的代码。我很确定JS中的clearInterval在我需要的东西中发挥了重要作用。非常感谢任何帮助，如果您需要更清晰，请告诉我:)）

<!DOCTYPE html>
<html>

<style>

#about {
  color: rgba(10,10,10,0);
  transition: color 1s linear 1s;
}

#about:target {
  color: rgba(10,10,10,1);
  transition: color 1s linear 1s;
}    

</style>

<body>

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

<div id="div">

<p id='about'> Please help me figure this out. I really appreciate it</p>  

</div>

</body>

<script>
function fadeIn() {
var elem = document.getElementById("about");   
var begin = 0;
var id = setInterval(frame, 10);
function frame() {
  if (begin == 100) {
    clearInterval(id);
  } else {
    begin++; 
    elem.style.color = begin + '1'; 
  }
 }
}
</script>

</html>

Answer 1

有一个解决方案，我不打算给你，因为JS＆＃34; hack＆＃34;与CSS-trick相比需要更长时间:(寻找合适的参考）

你把你想要淡入和淡出的东西包装成一个容器（只是确定）并在它上面添加一个复选框：

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

然后你设计你的东西：隐藏复选框（标签可点击）为#about_container制作两个配置第一种：处于关闭模式，第二种处于开启模式（您可以将它们注释掉以便进行调试）

#about + #about_container

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

#about:checked + #about_container

在您的开启模式下，离开另一个，就像它一样。

更好更快的解决方案！

您还应该将问题更改为：如何在鼠标单击或其他用户交互时使html元素显示和消失。

Answer 2

您可以使用过渡然后设置不透明度0.5，并在一些ms之后将其更改为1以使其在点击时淡入并以较旧的外观返回

编辑：

只需将fadeIn（）放在另一个函数中，然后在fadeIn（）executon中将不透明度设置为0

编辑：

JS

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

HTML

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

重复点击javascript函数

2 个答案: