需要用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