淡入淡出，不带jQuery

FadeIn and Out, without jQuery

本文关键字：jQuery 不带 淡出 淡入      更新时间：2023-09-26

我试图实现以下目标。

我有一篇文章，里面有一些内容。当我点击一个按钮，这篇文章就会消失。在它褪色后，它得到了一个新的类，用于以另一种方式显示内容。现在我想再次淡化它。但我找不到办法。

当我执行以下操作时，不透明度从一开始就保持为1。transition()函数由按钮调用。2000毫秒后，我调用了一个函数来更改文章的内容。当我只使用fadeOut时，一切都很好。但当我加上CCD_ 3时，不透明度保持在1。因此，我一点也不褪色。但内容至少仍在变化。

function transition() {
    fadeOut("article");
    setTimeout(listener, 2000);
    fadeIn("article");
}
function fadeOut(element) {
    var ele = document.getElementsByTagName(element);
    ele[0].style.transition = "opacity 2s linear 0s";
    ele[0].style.opacity = 0;
}
function fadeIn(element) {
    var ele = document.getElementsByTagName(element);
    ele[0].style.transition = "opacity 2s linear 0s";
    ele[0].style.opacity = 1;
}

希望有人能给我一个提示如何解决这个问题。请不要对jQuery提出任何建议。我想把它做成本地的。

您误解了setTimeout的作用。

它总是立即返回，因此您可以有效地将不透明度设置为0，然后立即再次将其设置回1。

试试这个。

 function transition() {
      fadeOut("article");
      setTimeout(function() { fadeIn("article"); }, 2000);
 }

setTimeout将创建一个后台计时器并返回，使后台计时器滴答作响。您的fadeIn函数将在两秒钟后被调用。

Daniel，

首先，您需要将返回函数放入setTimeout调用中，而不是在setTimeout设置和事件之后，以便在给定时间后调用该函数，因此当前您的转换是在第一次从淡出切换到淡入后立即添加的。其次，在调用其他函数之前进行get元素调用要高效得多，这样就不会一直搜索DOM。

这是您的代码的更新版本，虽然仍然不完美，但其中包含了这些建议。

transition();
function transition(){
    var ele = document.getElementsByTagName("article");
	fadeOut(ele);
    setTimeout(function(){	
        fadeIn(ele);
    }, 2000);
}
function fadeOut(element) {
    element[0].style.transition = "opacity 2s linear 0s";
    element[0].style.opacity = 0;
}
function fadeIn(element) {
	element[0].style.transition = "opacity 2s linear 0s";
	element[0].style.opacity = 1;
}
<body>
<article>
    Test
</article>
</body>

这里还有一个更新的版本，可以容纳多篇文章。

transition();
function transition() {
  var ele = document.getElementsByTagName("article");
  var count = ele.length;
  for (x = 0; x < count; x++) {
    fadeOut(ele[x]);
  }
  setTimeout(function() {
    for (x = 0; x < count; x++) {
      fadeIn(ele[x]);
    }
  }, 2000);
}
function fadeOut(element) {
  if (element != undefined) {
    element.style.transition = "opacity 2s linear 0s";
    element.style.opacity = 0;
  }
}
function fadeIn(element) {
  if (element != undefined) {
    element.style.transition = "opacity 2s linear 0s";
    element.style.opacity = 1;
  }
}
<body>
  <article>
    Test
  </article>
  <article>
    Test
  </article>
</body>

相关文章：