Question

我想显示多个div淡入淡出在同一位置无限次。

我已经使用了3个div无限次地在同一位置淡入淡出

我已经使用animate.css文件尝试过。但是无法解决。

    .quote-2{
        position: relative;
        height: 100px;
    }
   
    .quote-2 p{
        text-align: right !important;
    }
    .quote-2 .quote-text1{
        display: inline;
        position: relative;
        -webkit-animation: fadeIn 4s infinite;
        animation: fadeIn 4s infinite;
    
    }
    .quote-2 .quote-text2{
        display: inline;
        position: relative;
        -webkit-animation: fadeOut 4s infinite;
        animation: fadeOut 4s infinite;
    
    }
    .quote-2 .quote-text3{
            display: inline;
            position: relative;
            -webkit-animation: fadeIn 4s infinite;
            animation: fadeIn 4s infinite;
        
        }

    @-webkit-keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;
            display:block;}
    }
    @keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;
            display:block;}
    }
    .fadeIn{
        opacity:0;
    }
    @-webkit-keyframes fadeOut { 
        0% {opacity: 1;} 
        100% {opacity: 0;} 
    } 

    @keyframes fadeOut { 
        0% {opacity: 1;} 
        100% {opacity: 0;} 
    } 
    .fadeOut { 
        -webkit-animation-name: fadeOut; 
        animation-name: fadeOut; 
    }

<div class="quote-2">
       <div class="quote-text1">
          <p>Commit yourself: unless a commitment is made, There are only promises and hope</p>
          <p>Peter Drucker</p>
       </div>

       <div class="quote-text2">
           <p>Do your homework: by failing to prepare, you are preparing to fail</p>
           <p >Benjamin Franklin</p>
        </div>
       <div class="quote-text3 ">
           <p>Do your homework: by failing to prepare, you are preparing to fail</p>
           <p >Benjamin Franklin</p>
        </div>
     </div>

我不明白什么是错的，怎么办。

有人可以告诉我如何解决此问题（任何解决方案，通过CSS或JQuery）？

Answer 1

我认为您正在寻找类似的东西。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
  var tag1,tag2,tag3;
  $(document).ready(function(){
  tag1= $("#p1");
  tag2= $("#p2");
  tag3= $("#p3");
  tag2.fadeOut('fast')
  tag3.fadeOut('fast');
  setTimeout(StartFading,1000)
 });
 function StartFading(){
 tag1.fadeOut("slow",function(){
 tag2.fadeIn('fast',function(){
   tag2.fadeOut("slow",function(){
      tag3.fadeIn("slow",function(){
        tag3.fadeOut("slow",function(){
            tag1.fadeIn("slow",function(){
               StartFading();
            });
        });
      });
   });
  });
 });
}
</script>
</head>
<body>

 <p id='p1'>This is a paragraph1.</p>
 <p id='p2'>This is a paragraph2.</p>
 <p id='p3'>This is a paragraph3.</p>

 </body>
 </html>

这是一个jsfiddle https://jsfiddle.net/Negirox/4qxfnL9e/3/

Answer 2

更好地使用jquery而不是关键帧。

HTML

<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>

javascript

$(document).ready(function() {
  var i = 0;
  setInterval(function() {
     $("p").css("opacity", "0");
     $("p:eq("+i+")").css("opacity", "1");
     console.log("interval"+i);
     if(i == 2) {
       i = 0;
     } else {
       i++;
     }
   }, 2000);
 });

CSS

p {
  position: absolute;
  opacity: 0;
  transition: opacity .5s ease-in;
}

这里是pen

Answer 3

由于display: inline;属性，动画无法播放。删除后，动画将按设计工作。您无法使用display: inline;为元素设置动画，相关的specification中对此进行了明确说明。

我可能猜错了问题，所以这是使用纯CSS的更新答案。

p{
  position: absolute;
}

.block1{
  opacity: 0;
  animation: fadeIn 9s infinite;
}

.block2{
  opacity: 0;
  animation: fadeIn 9s infinite;
  animation-delay: 3s;
}

.block3{
  opacity: 0;
  animation: fadeIn 9s infinite;
  animation-delay: 6s;
}

@keyframes fadeIn{
  20% {opacity: 0;}
  50% {opacity: 1;}
  60% {opacity: 0;}
}

<div class = "container">
  <div class = "block1">
    <p>
    This is line 1.
    </p>
  </div>
  
  <div class = "block2">
    <p>
    This is line 2.
    </p>
  </div>
  
  <div class = "block3">
    <p>
    This is line 3.
    </p>
  </div>
</div>

CSS JQuery为多个div动画，在无限的时间在同一位置淡入和淡出

3 个答案: