如何使HTML元素被JavaScript隐藏，并在单击按钮时显示？

Question

我试图创建一个讲述一个故事的网站，并在打开该页面时加载所有页面，但是我需要帮助来正确编码要被Javascript隐藏的故事页面，因此当单击“下一个”图标时，它将显示在“淡出”前一页之后，具有“淡入”效果的隐藏页面。 我已经搜索并学习了如何在单击时“淡出”一个元素，但是我还需要使“淡入”中的下一个元素占据上一个元素的空间。 我对Web开发非常陌生，如果有人帮助我解决这个问题，我将感到非常高兴。 另外，我不使用jQuery，仅使用普通的Javascript。

 function fade(element) { var op = 1; // initial opacity var timer = setInterval(function () { if (op <= 0){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } function unfade(element) { var op = 0.1; // initial opacity element.style.display = 'block'; var timer = setInterval(function () { if (op >= 1){ clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, 10); } 

 .page1 { font-family: 'Amatic SC', cursive; font-size: 4.9em; text-align: center; padding: 10% 0% 0% 0%; } .start { cursor: pointer; } 

 <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="page1"> <p>A Short Story</p> <p class="start" onclick="fade(this)">Click here to start reading</p> </div> <div class="page2"> <img onclick="fade()" src="next.ico"> </div> <div class="page3"> <img onclick="fade()" src="next.ico"> </div> </body> </html> 

如您所见，在代码段中运行代码时，只有可单击的文本“淡出”，但是我希望做的是使页面中的整个文本“淡出”。 最好的方法是什么，如何使body元素中的下一个div元素“淡入”，并占用页面上前一个div元素的空间？

Answer 1

减少不透明度的算法会在几何上减少，并且仅在很长一段时间后才会达到零（基本上，数字会超出精度）：

element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;

如果要继续使用该算法，则结束循环和隐藏元素的测试应使用非零的（适当小的）值，例如

if (op <= 0.01) {

取消褪色似乎可以，但是与其将display设置为“ block”，还不如将其设置为空字符串，以便该元素采用其继承的或默认的样式（无论如何），因此：

element.style.display = '';

现在，您需要组合逻辑以淡出一个元素，然后淡入下一个元素。您可以创建一个函数，该函数最初隐藏所有页面，然后在单击时隐藏当前页面并显示下一个页面。 为此， 取消淡出功能需要在清除超时后运行的回调。

 // Use an IIFE so that variables that are // convenient as globals are kept private in // a closure var showNext = (function () { var pages = Array.from(document.querySelectorAll('.page')); var currentPage = null; return function() { // If the first time the function has been called, // hide all pages and show the first if (currentPage === null) { pages.forEach(function(page){ page.style.display = 'none'; }); currentPage = 0 unfade(pages[currentPage]); return; } // Otherwise, hide current page and show next var nextPage = (currentPage + 1) % pages.length; fade(pages[currentPage], function() { unfade(pages[nextPage]); }); // Update current page currentPage = nextPage; }; }()); function fade(element, callback) { var op = 1; // initial opacity var timer = setInterval(function() { if (op <= 0.1) { clearInterval(timer); element.style.display = 'none'; // Call callback if provided callback && callback(); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } function unfade(element) { var op = 0.1; // initial opacity element.style.display = ''; var timer = setInterval(function() { if (op >= 1) { clearInterval(timer); } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, 10); } showNext(); 

 <div class="page"> page 1 <button onclick="showNext()">Next Page&hellip;</button> </div> <div class="page"> page 2 <button onclick="showNext()">Next Page&hellip;</button> </div> <div class="page"> page 3 <button onclick="showNext()">Next Page&hellip;</button> </div> <button onclick="showNext()">Next Page&hellip;</button> 

获取下一页的按钮可以在页面的内部或外部。