Question

This is a pretty common problem, but I am looking to fade out some text, change it then fade it back in.

My code so far is:

setTimeout(function(){
    $("#ilovequote").fadeOut( 500, function(){
     var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
    var rand = ilovequotes[Math.floor(Math.random() * ilovequotes.length)];
    $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn( 500);
    });
  }, 500);
});

But this for some reason does not work. I am looking for help on this, basically I would like a smooth animation with just long enough to read the word.

JS FIDDLE

http://jsfiddle.net/rJDWb/

Answer 1

Do you want something like this?

var cnt = 0;
setInterval(function(){
cnt ==4 ? cnt=0:cnt++
    $("#ilovequote").fadeOut( 500, function(){
        var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
        var rand = ilovequotes[cnt];
        $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn( 500);
    });
},1000);

jsFiddle demo here http://jsfiddle.net/BMBDd/2/