如何使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>

獲取下一頁的按鈕可以在頁面的內部或外部。

如何使HTML元素被JavaScript隱藏，並在單擊按鈕時顯示？

問題描述

1 個解決方案

解決方案1
0 2017-08-16 04:41:19

如何使HTML元素被JavaScript隱藏，並在單擊按鈕時顯示？

問題描述

1 個解決方案

解決方案1 0 2017-08-16 04:41:19

解決方案1
0 2017-08-16 04:41:19