Sincronizzazione animazione, cursore e evidenziare

Question

Così quasi ho il mio code che funziona come voglio, ma non riesco a far sincronizzare l'animazione insieme. Sto cercando di animare un cursore evidenziando il testo, e quindi facendo clic su un pulsante. Il problema è che il cursore è troppo lento o troppo veloce. Sto cercando di rendere questo dinamico in modo che non importa per quanto tempo il testo è ancora possibile sincronizzare l'animazione. So che probabilmente è solo un problema di matematica, ma non riesco a capirlo. Qualcosa sul tentativo di far corrispondere i pixel con millisecondi mi sta facendo girare la testa. Per favore aiutatemi prima di tirare fuori tutti i miei capelli. Grazie.

Ecco il codice 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"/> 

Ecco la CSS

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

E il 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); 

Ecco un link al fiddle ho giocato in giro.

Answer 1

Questo sarà probabilmente ottenere me down votato ma forse si otterrà qualche idea migliore ...
Fiddle Here

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

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

Answer 2

Grazie a Dejo, sono stato in grado di modificare il mio code per fare questo lavoro esattamente come volevo. Era molto più facile aumentare la larghezza di una span piuttosto che tentare di espandere una span mentre si restringeva un'altra. Questo mi ha anche permesso di spostare sia il cursore che la larghezza dell'ampie aumentando le animazioni in sincrono.

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

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

E il 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

Mi rendo conto che è un po 'in ritardo, ma ecco un po' di aiuto (per riferimenti futuri). La funzione JQuery animate è, per impostazione predefinita, impostata su easing di swing, il che significa che la velocità dell'animazione varia in tutto (vedere here).

Per (tipo) risolvere il problema, ho aggiunto l'opzione linear al metodo animate per il cursore e aumentato leggermente la velocità.

È possibile visualizzare questa nuova versione allo JSFiddle.

Tuttavia, poiché il ciclo setTimeout può essere rallentato per alcuni motivi, l'animazione potrebbe non essere sincronizzata.