淡入/淡出一系列div

Question

I am trying to create a page in which text appears in the center of the screen, fades out and is replaced by other text. 我正在尝试创建一个页面，其中文本出现在屏幕的中央，淡出并被其他文本替换。 I have tried various approaches, but if I am successful in fading out the divs, they disappear too quickly. 我尝试了各种方法，但如果我成功淡出div，它们就会消失得太快。 Other times it doesn't iterate through my for-loop correctly. 其他时候它没有正确迭代我的for循环。

I understand that there are other similar questions, but the solutions there haven't helped me make much progress. 我知道还有其他类似的问题，但那里的解决方案并没有帮助我取得很大进展。

I have successfully determined how to fade in the elements. 我已经成功地确定了如何淡化元素。 I am using jQuery version 3.2.1 我使用的是jQuery 3.2.1版

Here is my HTML 这是我的HTML

<body>
  <div class="hidden1">
     <h1> Some text </h1>
  </div>
  <div class="hidden2">
     <h1> Other Text </h1>
  </div>
  <div class="hidden3">
    <h1> Even more text</h1>
  </div>
</body>

Here is my css 这是我的CSS

.hidden1, .hidden2, .hidden3 {
   opacity : 0;
   height: 100%;
   width: 100%;
   display: flex;
   position: fixed;
   align-items: center;
   justify-content: center;
}

Here is my JS 这是我的JS

var elements = ['hidden1', 'hidden2', 'hidden3'];

for(let i = 0; i < elements.length; i++){
      var thisElement = $("." + elements[i]); //get the current element based on class
      fadeInElement(thisElement, i); //call fade in function
      setTimeout(function() {
            $(thisElement).fadeOut(1000);
        }, 1000);
}
function fadeInElement(elem, time){
   setTimeout(function() {
      elem.css("opacity", "1"); //set element's opacity to 1
    }, 1250 * time); //set the time it should wait
}

You can see a demo here: https://jsfiddle.net/5tfaqvbg/1/ 你可以在这里看到一个演示： https ： //jsfiddle.net/5tfaqvbg/1/

Answer 1

Was this something you were going for? 这是你想要的东西吗？

 var elements = ['hidden1', 'hidden2', 'hidden3']; for(let i = 0; i < elements.length; i++){ var thisElement = $("." + elements[i]); //get the current element based on class fadeInElement(thisElement, i); //call fade in function thisElement.fadeOut(); } function fadeInElement(elem, time){ setTimeout(function() { elem.fadeIn(); }, 1250 * time); //set the time it should wait }

 .hidden1 .hidden2, .hidden 3{ opacity : 0; height: 100%; width: 100%; display: flex; position: fixed; align-items: center; justify-content: center; visibility: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="hidden1"> <h1> Some text </h1> </div> <div class="hidden2"> <h1> Other Text </h1> </div> <div class="hidden3"> <h1> Even more text</h1> </div> </body>

Answer 2

You have to set the opacity:0 to other elements as well. 您必须将opacity:0设置为其他元素。

Stack Snippet 堆栈代码段

 var elements = ['hidden1', 'hidden2', 'hidden3']; for (let i = 0; i < elements.length; i++) { setTimeout(function() { $("." + elements[i]).css("opacity", "1"); }, 1000 * i); if (i < (elements.length - 1)) { //for displaying the last element setTimeout(function() { $("." + elements[i]).css("opacity", "0"); }, 1000 * (i + 1)); } }

 .hidden1, .hidden2, .hidden3 { opacity: 0; height: 100%; width: 100%; display: flex; position: fixed; align-items: center; justify-content: center; transition: all .3s ease; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="hidden1"> <h1>Some text</h1> </div> <div class="hidden2"> <h1>Other Text</h1> </div> <div class="hidden3"> <h1>Even more text</h1> </div> </body>

Updated Fiddle 更新小提琴

Answer 3

Here's how to do this with jQuery selectors, .css() and a transition: 以下是使用jQuery选择器， .css()和转换的方法：

 var $elements = $('.hidden'); $elements.each(function(i) { let el = this; setTimeout(function() { $(el).css("opacity", 1); }, 1500 * i); setTimeout(function() { $(el).css("opacity", 0); }, 1500 * (i + 1)); });

 .hidden { opacity: 0; transition: opacity .5s; height: 100%; width: 100%; display: flex; position: fixed; align-items: center; justify-content: center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="hidden"> <h1> Some text </h1> </div> <div class="hidden"> <h1> Other Text </h1> </div> <div class="hidden"> <h1> Even more text </h1> </div> </body>

淡入/淡出一系列div

问题描述

3 个解决方案

解决方案1
1 2018-01-25 18:33:44

解决方案2
1 2018-01-25 19:24:32

解决方案3
1 已采纳 2018-01-25 20:58:15

淡入/淡出一系列div

问题描述

3 个解决方案

解决方案1 1 2018-01-25 18:33:44

解决方案2 1 2018-01-25 19:24:32

解决方案3 1 已采纳 2018-01-25 20:58:15

解决方案1
1 2018-01-25 18:33:44

解决方案2
1 2018-01-25 19:24:32

解决方案3
1 已采纳 2018-01-25 20:58:15