Animation synching, cursor and highlight

Question

So I almost have my code working how I want, but can't get my animation synched together just right. I am trying to animate a cursor highlighting text, and then clicking on a button. The problem is that the cursor is either too slow or too fast. I am trying to make this dynamic so that no matter how long the text is I can still have the animation synch. I know that it is probably just a math issue, but can't quite get my head around it. Something about trying to match pixels with milliseconds is making my head spin. Please help before I pull out all my hair. Thanks.

Here is the html

<p><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>

Here is the CSS

#container{
   font-size: 16px;  
   margin-right: 10px;   
}
.highlight{
    background: yellow;           
}
img{
  position: relative;
  top: -10px;    
} 

And the javascript

function highlight(){
    var text = $('#container').text(); //get text of container
    $('#click').css('border','none'); //remove the border
    $('img').css('left', '0px'); //reset the cursor left
    $('img').animate({left: $('#container').width() + 40}, text.length*70); //animation of cursor
    $('#container').html('<span class="highlight">'+text.substring(0,1)+'</span><span>'+text.substring(1)+'</span>'); //set the first html
    (function myLoop (i) {//animation loop          
       setTimeout(function () {        
         var highlight = $('.highlight').text();
         var highlightAdd = $('.highlight').next().text().substring(0,1);;
         var plain = $('.highlight').next().text().substring(1);
         $('#container').html('<span class="highlight">'+highlight+highlightAdd+'</span><span>'+plain+'</span>');     
         if (--i) myLoop(i);//  decrement i and call myLoop again if i > 0
        }, 70)
    })(text.length);
    setTimeout(function () {   
        $('#click').css('border','1px solid black');
     }, text.length*85);
}

highlight();
var intervalID = setInterval(highlight, $('#container').text().length*110);
//clearInterval(intervalID);  

Here is a link to the fiddle I have been playing around in.

Answer 1

I realize it's quite a bit late, but here's a bit of help (for future reference). The JQuery animate function is, by default, set an easing of swing, which means that the speed of the animation will vary throughout (see here).

To (kind of) fix the problem, I added the linear option to the animate method for the cursor, and increased its speed slightly.

You can see this new version at JSFiddle.

However, since the setTimeout loop can be slowed for some reasons, the animation may not be in sync.

Answer 2

Thanks to Dejo, I was able to modify my code to make this work exactly as I wanted. It was much easier to increase the width of one span rather than trying to expand one span while shrinking another. This also allowed me to have both the cursor moving and the span width increasing animations run in sync.

The HTML

<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span><input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>

The CSS

p{
  position: relative;
  font-size: 16px;   
 }
#highlight{
 position: absolute;
 background-color:yellow;
 height:20px;
 z-index:-50;   
}
#cursor{
 position: relative;
 top: -10px;    
}
#click{
  margin-left; 10px;   
}

And the javascript

function highlight(){
    var textLength = $('#container').text().length;
    $('#click').css('border','none'); //remove the border
    $('#cursor').css('left', '0px'); //reset the cursor left
    $('#highlight').width(0);
    $('#highlight').animate({width: $('#container').width()}, textLength * 70);
    $('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
        $('#cursor').animate({left: '+=30'} , textLength * 20);
    });
    setTimeout(function () {   
        $('#click').css('border','1px solid black');
     }, textLength*100);
}

highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120);
//clearInterval(intervalID); 

Answer 3

This will probably get me down voted but maybe you will get some better idea...
Fiddle Here

$(document).ready(function() {
$('p').click(function(){

    $('span').animate({'width':'100'},1000);
    $('.cursor').animate({marginLeft: 100},1000);
});
});