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 ```

I need to be highlighted one character at a time

``` 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 t…

Accepted Answer

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);
});
});
```

Animation synching, cursor and highlight

Solution

Problem