我的这个很好用。
谁知道如何在每个淡入时添加动画效果?
因此下一个文本会同时从 0 不透明度淡入和淡出。
jQuery(document).ready(function($) {
var quotes = $(".rotate-text li");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1000)
.delay(4000)
.fadeOut(1000, showNextQuote);
}
showNextQuote();
});
.rotate-text li {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="rotate-text">
<li>Some intro text</li>
<li>Oh look at me</li>
<li>Here I am again</li>
</ul>
最佳答案
试试这个。
jQuery(document).ready(function($) {
var quotes = $(".rotate-text li");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1000)
.delay(4000)
.fadeOut(1000, showNextQuote);
}
showNextQuote();
});
.rotate-text li {
display: none;
}
/* Animation */
@keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both
}
.animatedFadeInUp {
opacity: 0
}
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="rotate-text">
<li class="animated animatedFadeInUp fadeInUp">Some intro text</li>
<li class="animated animatedFadeInUp fadeInUp">Oh look at me</li>
<li class="animated animatedFadeInUp fadeInUp">Here I am again</li>
</ul>
关于javascript - 如何添加动画效果以淡入/淡出文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53825013/