如何像 Droplr 一样使用 CSS/jQuery 淡入/淡出多个文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17254442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?
提问by Amruth Pillai
I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.
就在 CSS3 关键帧开始获得动力时，我在网站上看到过这种类型的动画，但找不到它，也无法使用 CSS 或 jQuery 复制它，我认为你们中的一些人可以提供帮助。
I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.
我已经为我希望实现的目标制作了动画，并将其嵌入下面。我相信这可以使用新的 CSS3 关键帧或 jQuery 的 .animate() 进行编码；特征。我不知道。我已经尝试了我所知道的一切，但都是徒劳的。
Here's the GIF animation of what I wanted:
这是我想要的 GIF 动画：
I just noticed, http://droplr.com/uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!
我刚刚注意到，http://droplr.com/在他们的主页上使用了非常相似的过渡，但有一些滑动效果。出现的数据（单词）一直都是随机的。我想知道这怎么可能！
采纳答案by Leandro Lima
I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD
我知道这个问题已经解决了，但我认为它可能对其他人有帮助，所以我决定分享 xD
I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution
我正在寻找比这里提出的 sugestion 更流畅的东西，经过一段时间寻找后，我制定了自己的解决方案
Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation
在这里，我们需要从关键帧的时间轴方面考虑一下，在这种情况下，文本只会在另一个已经完成淡入淡出动画时显示
div{
posititon: relative;
}
.js-nametag{
position: absolute;
}
.js-nametag:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.js-nametag:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
@keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
} <p class="js-nametag">Leandro de Lima</p>
<p class="js-nametag">Game Master</p>回答by rpasianotto
A possible solution with pure css!
纯 css 的可能解决方案！
@-webkit-keyframes fade-in{
from{
opacity:1;
top:0px;
}
to{
opacity:0;
top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;
}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}
.aggettivi{
display:inline;
width:100px;
height:100px;
}
回答by Amruth Pillai
Some extensive Google Searching and experimenting has led me to the point where I can answer my own question, and just in time too!
一些广泛的谷歌搜索和实验使我能够回答我自己的问题，而且也很及时！
If any of you would like to know how that can be done, check out this CodePen snippet I wrote: http://codepen.io/AmruthPillai/pen/axvqB
如果你们中有人想知道如何做到这一点，请查看我写的这个 CodePen 片段：http://codepen.io/AmruthPillai/pen/axvqB
回答by Nick R
Something like this:
像这样的东西：
HTML
HTML
<p>I am <span>Something</span><span class="hidden">Test22222</span></p>
CSS
CSS
.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}
jQuery
jQuery
$(document).ready(function() {
// run the fade() function every 2 seconds
setInterval(function(){
fade();
},2000);
// toggle between fadeIn and fadeOut with 0.3s fade duration.
function fade(){
$("span").fadeToggle(300);
}
});
Note: this only works with toggling 2 words, it might be better to have an array of words, and to write a function to loop through those and apply the `fadeIn/fadeOut animation.
注意：这仅适用于切换 2 个单词，最好有一个单词数组，并编写一个函数来循环遍历这些单词并应用`fadeIn/fadeOut 动画。
Edit: Here is a solution for multiple words - https://stackoverflow.com/a/2772278/2470724it uses an arrayto store each word and then loops through them.
编辑：这是多个单词的解决方案 - https://stackoverflow.com/a/2772278/2470724它使用 anarray来存储每个单词，然后循环遍历它们。
Edit 2: Non-array solution : http://jsfiddle.net/kMBMp/This version loops through an un-ordered listwhich has display:noneon it
编辑2：非阵列溶液：http://jsfiddle.net/kMBMp/此版本通过环路un-ordered list，其具有display:none在其上
回答by Tony He
The lowest effort approach is probably to use the Morphext jQuery plug-in:
最省力的方法可能是使用 Morphext jQuery 插件：
https://github.com/MrSaints/Morphext
https://github.com/MrSaints/Morphext
It's powered by animate.css, so it's easy to change the animation style of the text.
它由animate.css提供支持，因此可以轻松更改文本的动画样式。
If you're looking for something a bit more powerful (can specify in AND out animations; animate not just text), there's a spin-off called Morphist:
如果你正在寻找更强大的东西（可以指定输入和输出动画；动画不仅仅是文本），有一个名为 Morphist 的衍生产品：
