Анимация синхронизация, курсор и выделение

Question

Итак, у меня почти есть мой code, работающий так, как я хочу, но не могу заставить мою анимацию синхронизироваться вместе в самый раз. Я пытаюсь анимировать курсор, выделяющий текст, и затем нажатие на кнопку. Проблема в том, что курсор слишком медленный или слишком быстрый. Я пытаюсь сделать это динамическим так, чтобы независимо от того, как долго текст, я все еще могу синхронизировать анимацию. Я знаю, что это, вероятно, только математическая проблема, но я не могу ее обойти. Что-то о попытке сопоставить пиксели с миллисекундами делает мою голову вращением. Пожалуйста, помогите, прежде чем вытащить все мои волосы. Благодарю.

Вот 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); 

Вот ссылка на fiddle я играл вокруг в.

Answer 1

Это, вероятно, получите меня вниз проголосовали, но, возможно, вы получите некоторые лучшее представление ...
Fiddle Here

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

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

Answer 2

Благодаря Dejo, я был в состоянии изменить мой code, чтобы сделать эту работу именно так, как я хотел. Было намного проще увеличить ширину одного диапазона, а не пытаться расширить один интервал, сокращая еще один. Это также позволило мне перемещать курсор, а анимация увеличения ширины пролета запускалась синхронно.

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

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

И 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

Я понимаю, что это совсем немного поздно, но вот немного помочь (для дальнейшего использования). Функция JQuery animate, по умолчанию, устанавливает easing из swing, что означает, что скорость анимации будет варьироваться во всем (см. here).

Чтобы устранить проблему, я добавил параметр linear в метод animate для курсора и немного увеличил его скорость.

Вы можете увидеть эту новую версию на JSFiddle.

Однако, поскольку по некоторым причинам цикл setTimeout может быть замедлен, анимация может не синхронизироваться.