CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Madhuri
Madhuri

Reputation: 158

Need to animate word with fadeinDown and fadeOutDown effect

I need to change a word every 5 seconds with fadeInDown and fadeOutDown effects in Javascript. I have a set of different words to be displayed. I have used following link for animation, but when the word changes it doesn't have the animation effect.

Animation: http://jschr.github.io/textillate/

ii. For In Animation, select ‘fadeInDown’ + ‘sync’ iii. For Out Animation, select ‘fadeOutDown’ + ’sync

For changing words I have used following code

<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>

Upvotes: 0

Views: 602

Answers (1)

Shikhar
Shikhar

Reputation: 1431

Textillate won't work properly here after animating the first word because your cycle javascript function is simply replacing the inner html of the span with the word you want. For textillate to work on a list of words, we need to create the appropriate html markup and then append it to desired span element.

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>

Here's a working fiddle

Upvotes: 1

Related Questions