creating jquery functions and using them for html elements?
===

im trying to create this function in javascript but its not working, im a bit new to js, so i don't what im really doing wrong here.

the code:

    <div id="test">TESTING</div>

JS:

    function animateDiv(div){
    
    var text = $('#' + div + '"').text();
    
    var doAnimate = function() {
        $('span').each(function() {
            var that = $(this);
            setTimeout(function() {
                that.animate({ fontSize: "90px" }, 1500 )
                    .animate({ fontSize: "50px" }, 1500 );
            },that.index()*100);
        });
    }
        
    $('#' + div + "'").html('');
    
    for(i=0; i<text.length; i++) {
      $('#' + div + "'").append('<span>'+text[i]+'</span>');
        if(i==text.length-1) doAnimate();
      }
    
    }
      // using the function here to run animation on div test from html  
     animateDiv(test);

the jsfiddle is here: http://jsfiddle.net/aA8Un/3/