使用 CSS 和 Javascript 淡入淡出文本

Question

我对此很陌生。到目前为止，当我使用 CSS 单击一个按钮时，我已经设法让我的文本淡入，但是样式保持在那里并且我无法在单击新按钮时将不透明度重置为零按钮。我不想使用纯 Javascript 来完成它，因为我想在 CSS 方面进行扩展。我希望这是有道理的，但如果有人能帮助我做到每次单击按钮时文本淡入，那就太棒了。

更好的是，如果你能告诉我如何让 CSS 再次淡出，那就太棒了。非常感谢。

这是对当前工作方式的 link。 http://infinitedv.co.uk/test01/experiment01.html

function text1() {
  textbox.style.opacity = 1;
  textbox.style.transition = "opacity 1.6s";
  document.getElementById("textbox").innerHTML =
    "This is a test of My Amazing New Javascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! ";
};
function text2() {
  textbox.style.opacity = 1;
  textbox.style.transition = "opacity 1.6s";
  document.getElementById("textbox").innerHTML = "Even more evidence of my amazing new javascript skills! Would you like to know the time and date? No problem:" + "<br><br>" + Date();
};

#textbox {
  width: 400px;
  opacity: 0;
}
#wrapper {
  margin: auto;
  width: 500px;
}

<div id="wrapper">
  <h1>Will's Amazing javascript experience!</h1>
  <button onclick="text1()" type="Button 1">Button1</button>
  <button onclick="text2()" type="Button 2">Button2</button>
  <br />
  <p id="textbox">Text will Magically appear here!</p>
</div>

Answer 1

不完全使用 Javascript 的最佳选择是包含 jQuery 库，方法是将其添加到代码顶部：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.js"></script>

然后，您可以使用jQuery提供的.animate()函数直接更改您想要的任何选择器的不透明度属性。还有 .fadeIn()、.fadeOut() 和 .fadeToggle() 函数，但不能让您直接访问所需的 CSS 属性。以下是如何使用 .animate() 在一段时间内切换不透明度的示例：

这会在 400 毫秒内将不透明度淡化为 0： $('#my-selector').animate({opacity: 0},400);

这会在 400 毫秒内将不透明度逐渐变回 100： $('#my-selector').animate({opacity: 100},400);

.animate() 文档：http://api.jquery.com/animate/ 淡入淡出文档：https://api.jquery.com/category/effects/fading/

jQuery 是专业开发中最容易使用和最受欢迎的 JavaScript 库。

Answer 2

您忘记将 HTML 元素的不透明度重置为 0。以下示例使用 CSS class animatee 添加到元素时淡入淡出的内容. animatee在您第一次单击按钮时被删除（因此它使其透明），然后在超时时再次添加，这将触发转换。

        function text1() {
          document.getElementById("textbox").className = "";
          document.getElementById("textbox").innerHTML =
            "This is a test of My Amazing New Javascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! This is a test of My Amazing New Jazascript skills! ";
          setTimeout(function() {
            document.getElementById("textbox").classList.add("animatee");
          }, 300);
        };

        function text2() {
          document.getElementById("textbox").className = "";
          document.getElementById("textbox").innerHTML = "Even more evidence of my amazing new javascript skills! Would you like to know the time and date? No problem:" + "<br><br>" + Date();
          setTimeout(function() {
            document.getElementById("textbox").classList.add("animatee");
          }, 300);
        };

     #textbox {
       width: 400px;
       opacity: 0;
     }
     #wrapper {
       margin: auto;
       width: 500px;
     }
     .animatee {
       opacity: 1 !important;
       transition: opacity 1.6s ease 0s;
     }

<div id="wrapper">

  <h1>Will's Amazing javascript experience!</h1>

  <button onclick="text1()" type="Button 1">Button1</button>
  <button onclick="text2()" type="Button 2">Button2</button>
  <br />
  <p id="textbox">Text will Magically appear here!</p>
</div>

使用 CSS 和 Javascript 淡入淡出文本

Fading text in and out using CSS and Javascript

html

javascript

css

fade

css-transitions