需要用fadeinDown和fadeOutDown效果动画单词

Question

我需要每5秒用Javascript中的fadeInDown和fadeOutDown效果更改单词。 我有一组不同的单词要显示。我已经使用以下链接进行动画制作，但是当单词改变时它没有动画效果。

动画：http://jschr.github.io/textillate/

II。在动画中，选择'fadeInDown'+'同步' iii。对于出场的动画，选择“fadeOutDown” +“同步

要想改变的话我用下面的代码

<script> 
$(function() { 
    var messages = [], 
     index = 0; 

    messages.push('awesome'); 
    messages.push('incredible'); 
    messages.push('cool'); 
    messages.push('fantastic'); 

    function cycle() { 
     $('#some-id').html(messages[index]); 
     index++; 

     if (index === messages.length) { 
      index = 0; 
     } 

     setTimeout(cycle, 5000); 
    } 

    cycle(); 
}); 
</script> 

HTML code : 

<div> 
This is so<span id="some-id">awesome</span> 
</div> 

Answer 1

Textillate不会动画的第一个字后正常这里工作，因为你的cycle javascript函数是简单地更换跨度的内部html与你想要的单词。要使textillate能够处理单词列表，我们需要创建适当的html标记，然后将其附加到所需的span元素。

JQUERY

$(function() { 
    var messages = [], 
    index = 0; 

    messages.push('awesome'); 
    messages.push('incredible'); 
    messages.push('cool'); 
    messages.push('fantastic'); 

    //Function for generating appropriate html markup as required by textillate 
    function generateMarkup() { 
     var markup = ''; 

     //Wrapping all words in <li> tags as required by textillate 
     messages.forEach(function(item){ 
      markup += '<li>' + item + '</li>'; 
     }); 

     //Wrapping the li tags in <ul class="texts"> tag as required by textillate 
     markup = '<ul class="texts">' + markup + '</ul>'; 
     return markup; 
    } 
    markup = generateMarkup(); 

    //Appending the html markup we generated to the desired span element 
    $("#some-id").append(markup); 

    //Initializing textillate 
    $('#some-id').textillate({ 
     in: { 
      effect: 'fadeInDown', 
      sync: true, 
     }, 
     out: { 
      effect: 'fadeOutDown', 
      sync: true, 
     }, 
     loop: true, 
     minDisplayTime: 5000, //Delay between changing words 
    }); 
}); 

HTML

<div> 
    This is so <span id="some-id"></span> 
</div> 

这里的工作fiddle