How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

Question

I\'ve seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn\'t find it nor could I replicate it using CSS or jQuery, and he

Answer 1

Something like this:

JSFiddle Demo

HTML

I am SomethingTest22222

CSS

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

jQuery

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

Note : this only works with toggling 2 words, it might be better to have an array of words, and to write a function to loop through those and apply the `fadeIn/fadeOut animation.

Edit : Here is a solution for multiple words - https://stackoverflow.com/a/2772278/2470724 it uses an array to store each word and then loops through them.

Edit 2 : Non-array solution : http://jsfiddle.net/kMBMp/ This version loops through an un-ordered list which has display:none on it