How can I create animated letter increments of a given word similar to the way animated number counters work?

I'm creating an "animated letter incrementer" that takes any given word and increments each letter of that word starting from A.

Example:

Word = Dog

D - Increments from A to D [A, B, C, D]
O - Increments from A to O [A, B, C, D, E, F, G, H, I, J, K, L, M, N, O]
G - Increments from A to G [A, B, C, D, E, F, G]

The effect I'd like to achieve is similar to this jQuery animated number counter, except I'll be incrementing letters instead of counting numbers. Also, each letter of the word should increment independently, but they should all reach their destination letter at the same time.

PHP

$word = "Dog";
$word = strtoupper($word);

JavaScript

var wordToIncrement = '<?=$word; ?>';
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

var arrayLength = alphabet.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(alphabet[i]);
}

for (var i = 0, len = wordToIncrement.length; i < len; i++) {

    console.log(wordToIncrement[i]);

    var letterToIncrementTo = wordToIncrement[i];

    function IncrementToLetter(letterToIncrementTo,alphabet) {

        // This is where I get lost

    }

}

How can I combine the code above with the "count" functionality from the animated number counter example shown below to successfully increment through each letter of the word?

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});