动画同步,光标和高亮显示

Question

所以我几乎让我的代码按照我想要的方式运行,但是无法将我的动画同步到一起.我试图设置光标突出显示文本,然后单击按钮.问题是光标太慢或太快.我试图使这个动态,所以无论文本有多长,我仍然可以让动画同步.我知道这可能只是一个数学问题,但不能完全理解它.试图用毫秒来匹配像素的东西让我头晕目眩.在拉出我所有的头发之前请帮忙.谢谢.

这是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"/>

这是CSS

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

和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);  

这是我一直在玩的小提琴的链接.

Answer 1

这可能会让我投票失败，但也许你会得到一些更好的主意......
在这里小提琴

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

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