Fade In String Characters with JQuery?

Question

Here is my code. For some reason the entire String fades in at one time instead of each individual character. My console.log shows the characters are being executed one by one.

Answer 1

I thought about this for a bit, and believe this would be better served with $.Deferred() This allows the animation to be whatever you want, and if you change that, it does not impact the rest - the animation controls the timing, firing "done" and starting the next letter when it completes by triggering the custom event.

Nothing fancy, just does what you asked.

Simple markup:

For example:

var myString = " Freddy The Mark";
var i = 0;  // used to iterate the string, could be done other ways
var myEffect = function (c) {
    return $("#animator").append(c).fadeIn(800).delay(800).fadeOut(1);
};
$("#animator").on("show", function () {
    var c = myString[i];
    $.when(myEffect(c)).done(function () {
        i++;
        if (i < myString.length) {
            $('#animator').trigger('show');
        } else {
            $("#animator").show();//show it when we are done
        }
    });
});
$('#animator').trigger('show'); //get started by firing the custom event handler

Put it all together in a sample: http://jsfiddle.net/N8eRN/1/