Fade in/Fade out of Words in Array List using Javascript

Question

I would like for the fade in/fade out to work for each word, one after the other. However, it either displays the last word in the array or everything together. I'm using animate.css and I'm trying to use JQuery to effect this transition of words. Please advise. thanks

   <script>
    var classes = [ '<h1 class="animated infinite rotateOutUpLeft">Software        </h1>',
            '<h1 class="animated infinite rotateOutUpLeft">project </h1>',
            '<h1 class="animated infinite rotateOutUpLeft">Engineering</h1>',  
            '<h1 class="animated infinite rotateOutUpLeft">Science</h1>'
        ];

         var display;
            // var i = 10000000;
           for (i = 0; i < classes.length; i++) {
                document.write(i);
                $("#tst").empty();
                 $("#tst").append(classes[i]);
                // setTimeout(function(){alert('join');}, 10000);
                // $("#tst").append(classes[i]);
                // setTimeout(function(){$("#tst").append(classes[i]);}, 6000);
            }
</script>

Welcome to StackOverlfow. Please take a look at the how to ask help section. If you supply a code example illustrating what you've tried you are more likely to receive good answers — wahwahwah
– wahwahwah, Commented May 19, 2015 at 23:08
Greensock does a great job animating text: greensock.com/SplitText — markE
– markE, Commented May 21, 2015 at 1:36

John S · Accepted Answer · 2015-05-21 01:43:52Z

1

Are you looking for the code to just change the word every six seconds while CSS takes are of the fading? If so, this might work:

var i = 0;
$("#tst").html(classes[i]);
setInterval(function() {
    i = (i + 1) % classes.length;
    $("#tst").html(classes[i]);
}, 6000);

jsfiddle

Or:

(function displayClass(i) {
    $("#tst").html(classes[i]);
    setTimeout(function() {
        displayClass((i + 1) % classes.length);
    }, 6000);
})(0);

jsfiddle

If you want the code to do the fading:

var classes = ['Software', 'project', 'Engineering', 'Science'];
(function displayClass(i) {
    $('#tst h1').text(classes[i]).fadeIn(1000).delay(600).fadeOut(1000, function() {
        displayClass((i + 1) % classes.length);
    });
})(0);

jsfiddle

edited May 21, 2015 at 1:43

answered May 20, 2015 at 0:35

John S

21.5k9 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wmorris Over a year ago

Thanks John S. The two first set of codes you wrote worked the way I wanted it to except that it doesn't have the fading. The third, I tried running but it didn't work. I am not sure why but I think it may have to do with the version of jquery I'm using("ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js") as the fadeIn function does nothing. I am very grateful for your input. Can you also explain why my code didn't work? I noticed javascript seems to not execute in a sequential manner as other languages.

John S Over a year ago

@wmorris - I have updated the jsfiddle so the <h1> element is initially hidden. Now the element fades in the first time too. I also shortened the code. The animation functions queue up, so I didn't need to use the one callback function.

John S Over a year ago

@wmorris - Are you saying it never fades in, but it does fade out? There should be no difference with this code for the version of jQuery you are using. As for JavaScript not executing sequentially, when callback functions are passed to setTimeout or setInterval they are not executed until later. Also, jQuery functions that animate an element use setInterval internally.

wmorris Over a year ago

Sorry. My bad. It worked perfectly. Thanks a million,

Collectives™ on Stack Overflow

Fade in/Fade out of Words in Array List using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related