我试图创建一个讲述一个故事的网站,并在打开该页面时加载所有页面,但是我需要帮助来正确编码要被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元素的空间?

#1楼 票数:0

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

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> 

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

  ask by João Cardoso translate from so

未解决问题?本站智能推荐:

1回复

如何通过单击Javascript来使HTML TD设置为overflow:hiddenscroll隐藏滚动?

我有一个HTML TD,溢出设置为隐藏。 它的宽度是850px,高度是567px。 内部内容的高度应为567px,宽度为1700px。 我希望用户能够单击JavaScript按钮,该按钮将TD内的下一个表滚动到视图中。 我怎样才能做到这一点? 我已经尝试了document.getEle
3回复

当我使用 CSS 或 JS 单击 HTML 按钮时显示元素

我想在单击按钮时弹出一些文本(用户输入的三个甜点名称)。 这是我的代码 你能给我一个CSS(级联样式表)代码吗? 如果没有,那么给我一个 JS (javascript) 代码。 顺便说一句,我不知道 js :(
3回复

仅当用户使用javascript使用IE浏览时,如何才能隐藏按钮?

这是我的代码。如果用户使用IE浏览,我想隐藏该按钮。 我这样尝试过,但是没有任何人可以帮助我。
2回复

我怎样才能做到当我点击向上或向下按钮时,数字会增加或减少

我正在尝试制作一个投票功能,所以当有人点击向上箭头时,数字会增加,当有人点击向下箭头时,数字会减少。 这是我的 html 和 css .upVote { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); ba
4回复

我已经在CSS中隐藏了一些内容,但是当我单击按钮时我现在无法使其可见

我对所有这些都很新,仍然在学习:s 所以在我的CSS中,我已经做到了... 我有一个按钮,当我单击该按钮时,会使其他div变得不可见,并试图使其显示为.example。 我正在使用onClick函数...这是我设置其他div的地方... 我似乎无法弄清楚如何使另一个d
3回复

当我点击按钮时隐藏的内容没有显示,为什么会这样?

我正在尝试创建一个更少阅读的阅读按钮。 我隐藏的内容位于span标记中。 我使用了一些javascript来完成这项工作。 目前,当我点击按钮时没有任何反应。 我的目标是创建一个新闻部分,当您单击按钮时显示更多新闻。 这对我来说很有用,我使用完全相同的代码,只是将其与其他代码合并,
1回复

当我点击粗刷按钮时,如何用javascript删除html中画布的线宽

我想在我点击粗刷按钮时删除线宽,但它不起作用在这个绘制条件中有不同的条件基于你点击的按钮,我正在删除erasecanvas中的模糊和shadowcolor但它不起作用。 我正在改变基于按钮的绘图设计。 我正在改变基于按钮的绘图设计 我想当你点击喷雾按钮时应该被移除,只有喷雾会显示,当
3回复

如何使用jQuery click方法显示隐藏的元素?

这是一个非常基本的问题,但是我已经研究了一段时间了,无法找到解决方案。 我在HTML文档中有一系列<li>项目。 在每个按钮的末尾,我都有一个想要单击的按钮,它显示一些隐藏的文本。 由于我有一系列这些<li> ,因此我想出了最简单的方法是让每个按钮单击都通