एनीमेशन सिंकिंग, कर्सर और हाइलाइट

Question

तो मेरे पास लगभग code काम कर रहा है जो मैं चाहता हूं, लेकिन मेरी एनीमेशन ठीक से एक साथ सिंक नहीं हो सकता है। मैं पाठ को हाइलाइट करने वाले कर्सर को एनिमेट करने की कोशिश कर रहा हूं, और उसके बाद बटन पर क्लिक कर रहा हूं। समस्या यह है कि कर्सर या तो बहुत धीमा या बहुत तेज़ है। मैं इसे गतिशील बनाने की कोशिश कर रहा हूं ताकि कोई फर्क नहीं पड़ता कि टेक्स्ट कितना समय है, फिर भी मुझे एनीमेशन सिंक हो सकता है। मुझे पता है कि यह शायद सिर्फ एक गणित मुद्दा है, लेकिन इसके चारों ओर मेरा सिर नहीं मिल सकता है। मिलीसेकंड के साथ पिक्सेल से मिलान करने की कोशिश करने के बारे में कुछ मेरा सिर स्पिन कर रहा है। मेरे सभी बाल खींचने से पहले कृपया मदद करें। धन्यवाद।

यहाँ एचटीएमएल

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

यहाँ सीएसएस

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

और जावास्क्रिप्ट

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 यह काम बिल्कुल के रूप में मैं चाहता था बनाने के लिए। किसी दूसरे को कम करने के दौरान एक अवधि का विस्तार करने की बजाय एक अवधि की चौड़ाई बढ़ाने के लिए यह बहुत आसान था। इसने मुझे कर्सर को आगे बढ़ने की अनुमति दी और अवधि की अवधि बढ़ने वाले एनिमेशन को सिंक में चलाया।

एचटीएमएल

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

सीएसएस

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

और जावास्क्रिप्ट

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 फ़ंक्शन डिफ़ॉल्ट रूप से easingswing सेट करता है, जिसका अर्थ है कि एनीमेशन की गति पूरे हो जाएगी (देखें here)।

समस्या को ठीक करने के लिए, मैंने linear कर्सर के लिए animate विधि में विकल्प जोड़ा, और इसकी गति को थोड़ा बढ़ा दिया।

आप इस नए संस्करण को JSFiddle पर देख सकते हैं।

हालांकि, setTimeout लूप को कुछ कारणों से धीमा किया जा सकता है, इसलिए एनीमेशन सिंक में नहीं हो सकता है।