Question

我对此非常陌生。到目前为止，当我点击使用CSS的按钮时，我设法让我的文字淡入，但是然后风格停留在那里，我无法在单击一个新的时候将不透明度重置为零按钮。我不想使用纯Javascript来做这件事，因为我想扩展CSS方面。我希望这是有道理的，但是如果有人能帮助我做到这一点，那么每次点击一个按钮时文本都会消失，那就太棒了。

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

这是目前工作方式的链接。 http://infinitedv.co.uk/test01/experiment01.html

＆＃13;

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();
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

        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);
        };

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在没有纯粹使用Javascript的情况下，最好的选择是将jQuery库添加到代码的顶部：

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

然后，您可以使用jQuery提供的.animate()函数直接更改所需选择器的opacity属性。还有.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库。

使用CSS和Javascript淡入淡出文本

2 个答案: