Question

我正在尝试创建一个页面，其中文本显示在屏幕的中央，淡出并被其他文本替换。我尝试了各种方法，但如果我成功淡出div，它们就会消失得太快。其他时候它没有正确迭代我的for循环。

我知道还有其他类似的问题，但那里的解决方案并没有帮助我取得很大进展。

我已成功确定如何淡化元素。我正在使用jQuery版本3.2.1

这是我的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>

这是我的css

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

这是我的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
}

您可以在此处查看演示：https://jsfiddle.net/5tfaqvbg/1/

Answer 1

这是你想要的吗？

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您还必须将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

以下是使用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 个答案: