javascript - 需要使用 fadeinDown 和 fadeOutDown 效果对单词进行动画处理

Question

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

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

ii.对于“在动画中”，选择“fadeInDown”+“sync”三.对于退出动画，选择“fadeOutDown”+“sync”

为了更改单词，我使用了以下代码

<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 函数只是将 span 的内部 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