CSS JQuery动画多个div淡入和淡出在同一地点无限时间。
CSS JQuery动画多个div淡入和淡出在同一地点无限时间。
提问于 2018-08-01 14:43:07
我想显示多个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 )吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-01 14:54:48
与其使用关键帧，不如使用jquery。
<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;
}这是一个钢笔
Stack Overflow用户
发布于 2018-08-01 14:53:32
我想你是在找这样的东西。
<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/
Stack Overflow用户
发布于 2018-08-01 15:04:27
由于display: inline;属性，动画无法工作。一旦删除动画作品的设计。您不能用display: inline;动画元素，这在相关的规格说明中有明确的说明。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51636184
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号