Question

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

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

II。对于In Animation，选择'fadeInDown'+'sync' III。对于Out Animation，选择'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函数只是用您想要的单词替换跨度的内部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

需要使用fadeinDown和fadeOutDown效果为单词设置动画

1 个答案: