Question

我正在尝试创建一个讲述故事的网站，并在打开时加载所有页面，但我需要帮助正确编码要通过Javascript隐藏的故事页面，所以当＆＃ 34;下一个＆＃34;单击图标，它会显示隐藏页面，其中包含＆＃34;淡入＆＃34;效果，在＆＃34;淡出＆＃34;上一页。我已经搜索并学会了如何淡出＆＃34;淡出＆＃34;单击时的一个元素，但我还需要使下一个元素＆＃34;淡入＆＃34;占据前一个空间。我对网络开发很陌生，如果有人帮我解决这个问题，我会很高兴。 另外，我没有使用jQuery，只是普通的Javascript。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，当您在代码段中运行代码时，只有可点击的文字＆＃34;淡出＆＃34;，但我希望做的是在页面中制作整个文字＆＃34;淡出＆＃34;。这样做的最佳方法是什么，以及如何在body元素中创建下一个div元素＆＃34;淡入＆＃34;，并获取页面上前一个div元素的空间？

Answer 1

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

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

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

if (op <= 0.01) {

unfade 似乎没问题，但是将 display 设置为“block”，而不是将其设置为空字符串，以便元素采用其继承或默认样式（无论如何）可能是），所以：

element.style.display = '';

现在你需要将逻辑放在一起淡出一个元素，然后淡出下一个元素。你可能会创建一个最初隐藏所有页面的函数，然后在单击时隐藏当前页面并显示下一个页面。为此， unfade 函数需要在超时被清除后运行的回调。

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

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

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

1 个答案: