Jquery Text Rotator

I am trying to create a simple jquery text rotator: I have a span in which text should fade in and out. There are similar questions here on stackoverflow but I can't apply their so

Solution 1:

Okay, i've had a quick play and expanded it a little for you..

JS Fiddle: http://jsfiddle.net/4k3zfv5f/

functionrotate(sID,aWords, iIndex){
        $("#"+sID).html(aWords[iIndex]).fadeIn(1000, function() {   
            iIndex==(aWords.length-1)? iIndex=0:iIndex++;           
            $("#"+sID).fadeOut(1000, function() {                   
                rotate(sID,aWords,iIndex);                          
            }); 
        });
    }



    rotate("test1",["Hello", "World", "Foo"], 0);
    rotate("test3",["John", "Bob", "Billy", "Mike", "Larry"], 0);

EDIT - UPDATE

Basically there were a few corrections i had to make, so instead of going over each one.. Will just let you compare the changes.. Part of it is that the fade functions did not wait til they completed, the Delay command only applies to the jquery object and the append i reversed just for my visual sake.

Also the last part as you mentioned in the comments, was to swap appendTo with html.

Just as an extra bonus, a shuffle example:

JS Fiddle Showing With Shuffle Example: http://jsfiddle.net/ye3rjy2v/1/

Solution 2:

The logic of the append > fade > delay > fade wasn't really working. I've added a Timeout and a callback function to the fadeout to make it working nicely. Also made it easier to write the call function so you have only one extra parameter. EXAMPLE

var i = 0;

functionrotate(spanid, words) {
    var arrWords = words.split(',');
    var myspan = $('#' + spanid);
    i == arrWords.length-1 ? i = 0 : i++;
    myspan.text(arrWords[i]);
    myspan.fadeIn();
    setTimeout(function(){             
        myspan.fadeOut(400, function() {            
            rotate(spanid, words); 
        });
    }, 2000);
}

rotate('rotate', 'word1,word2,word3');

Solution 3:

$(function () {
    functionrotate(spanid, arrayOfWords) {
        var $mySpan = $("#" + spanid);
        (functionrepeatRotate(index) {
            var i = index || 0;
  $mySpan.text(arrayOfWords[i]).fadeIn(1000).fadeOut(1000, function () {
                i = (i === arrayOfWords.length - 1) ? 0 : ++i;
                repeatRotate(i);
            });
        })();
    }
    rotate("rotate", ["word1", "word2", "word3"]);
});

JSBIN DEMO

The above code will rotate the words defined in array after particular time interval.