Jquery button text effect

Question

Is there anyway to animate text inside button?. I want to implement text effect. This is my code.

$(function () {
    var string = "Shop Now";
    var q = jQuery.map(string.split(''), function (letter) {
        return $('<span>' + letter + '</span>');
    });

    var dest = $('#fadeIn');

    var c = 0;
    var i = setInterval(function () {
        q[c].appendTo(dest).hide().fadeIn(100);
        c += 1;
        if (c >= q.length) clearInterval(i);
    }, 30);
});

Here is my button code and i want to implement this effect. Is there a way to animate text button effect?.

Answer 1

I have updated you fiddle check now: http://jsfiddle.net/JeekOnline/veDY6/31/

  <button class="btn btn-primary" type="button"><div id="fadeIn">  </div></button>
  </div>