Javascript 在HTML5/jQuery/css3中将单词（出现和消失）动画设置为毫秒

我是jQuery和css3的@keyframes的新手，所以我向你寻求建议。 我需要创建一个30秒的单词和非单词动画，以毫秒为单位精确设置延迟，快速出现和消失。请参见此处的flash演示：

在HTML5中使用jQuery或css3（或任何其他方式）也可以做同样的事情吗

在jQuery中，函数FadeIn和FadeOut似乎是一个潜在的解决方案，但我不知道如何迭代数百个单词：

<div id="test">Attention!</div>

$(function() {
$('#test').fadeOut(100, function() {
    $(this).text('Bunny').fadeIn(100);
});
 $('#test').fadeOut(100, function() {
    $(this).text('Turtle').fadeIn(100);
});

注意！
$（函数（）{
$（“#测试”）.fadeOut（100，function（）{
$（此）.text（'Bunny'）.fadeIn（100）；
});
$（“#测试”）.fadeOut（100，function（）{
$（this）.text（'Turtle'）.fadeIn（100）；
});

我的另一个想法是在每个标签上使用兔子龟标签，并使用@keyframes为它们的不透明度设置动画，但是使用超过100个单词似乎非常不方便

另一个要求是该解决方案可以在Ipad Safari上运行

有什么想法吗

编辑

我用这个近似于我所拥有的。虽然可能不是最优雅的解决方案。如果有人有更好的想法，我会非常感兴趣

<span id="foo"></span>

var arr = ["turtle", "bunny", "rabbit", "chicken", "moose", "penguin", "ant", "buffalo", "mouse", "deer", "phoque"];
var narr = ['dsfadsf', 'fasdfsaf', 'dsfasd', 'dsfsaafds', 'fdafaf', 'wwwww', 'yetszfs'];
var key = ['stack', 'over', 'flow', 'jquery', 'html5', 'javascript'];

$("#foo").fadeIn(1).delay(200).html(narr[0]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(key[0]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[1]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(400).html(arr[0]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(narr[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[1]).fadeOut(1, function(){

$("#foo").fadeIn(1).delay(50).html(key[1]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(400).html(arr[1]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(narr[3]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[2]).fadeOut(1, function(){

$("#foo").fadeIn(1).delay(50).html(key[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[3]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(400).html(arr[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(narr[4]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[3]).fadeOut(1, function(){

//etc.

});}); }); }); }); });      
}); }); }); }); });
}); }); }); }); });

var arr=[“海龟”、“兔子”、“兔子”、“鸡”、“驼鹿”、“企鹅”、“蚂蚁”、“水牛”、“老鼠”、“鹿”、“凤凰”]；
var narr=['dsfadsf'，'fasdfsaf'，'dsfasd'，'dsfsaafds'，'fdafaf'，'wWWW'，'yetszfs']；
var key=['stack'，'over'，'flow'，'jquery'，'html5'，'javascript']；
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[0]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（50）.html（键[0]）.fadeOut（1，函数（）{
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[1]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（400）.html（arr[0]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（50）.html（narr[2]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[1]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（50）.html（键[1]）.fadeOut（1，函数（）{
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[2]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（400）.html（arr[1]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（50）.html（narr[3]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[2]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（50）.html（键[2]）.fadeOut（1，函数（）{
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[3]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（400）.html（arr[2]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（50）.html（narr[4]）.fadeOut（1，function（）{
$（“#foo”）.fadeIn（1）.delay（200）.html（narr[3]）.fadeOut（1，function（）{
//等等。
});}); }); }); }); });      
}); }); }); }); });
}); }); }); }); });

最近我做了类似的事情，我为一系列句子创建了一个排序幻灯片。jquery是一种简单的方法。例如，你可以使用setInterval函数迭代存储在数组中的一系列单词。如果你愿意，你可以链接fadeIn和fadeOut以获得一个很好的转换效果

i=0
setInterval(function() {
    if (i == messages.length)
     { some action }
    else
    {
        $('#message').fadeIn(*time*).delay(*time*).html(words[i]).fadeOut(*time*);
        i++;  //counter, set to 0 initially
    }
}, x * 1000); //repeats actions after every x seconds.

需要注意的一点是，如果else块中所有时间的总和应等于或小于setinterval的时间x，以获得平滑和正确的过渡效果

---

我希望这有助于为您指明正确的方向。

您需要与flash演示中显示的完全相同的结果吗？还是需要一些额外的动画，如幻灯片、淡入淡出或缩放？@Maulik Anand完全相同的结果更可取，包括一些单词/非单词显示的时间比其他单词短。非常好的开始，谢谢！我的问题是我需要一些单词在这个过程中，我比其他人看得更快，而且会反复出现。因此我想知道是否有办法创建不同的setInterval集。理想情况下，我想我应该分别设置每个单词的计时。我创建了一个包含两组setInterval的集合，但不知道第二组集合如何包含比其他集合出现得更快的单词。我从来没有这样做过我们能够成功地使用多个setinterval，因为它总是会造成很大的混乱。我认为单独设置每个工作的时间将使您能够更好地控制过渡。