我想无限期地在同一个地方一个接一个地显示多个 div 淡入淡出。
我已经使用三个 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)？
最佳答案
我想你正在寻找这样的东西。
<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/
关于javascript - CSS JQuery 动画多个 div 在同一位置无限时间淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51636184/