動畫同步，光標和突出顯示

所以我幾乎有我的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我一直在玩周圍的鏈接。

來源

2012-12-20 Blake Plumb

這可能會得到我失望投票，但也許你會得到一些更好的主意......
Fiddle Here

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

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

來源

2012-12-20 20:28:08

+1我喜歡它，並會看看我是否可以將它集成到我的代碼中。我仍然想看看是否有更好的解決方案。謝謝 –

很高興幫助... –

你搖滾！感謝這個想法。正是我需要提出解決方案。看到我的更新[代碼]（http://jsfiddle.net/bplumb/MmZwU/2/）。 –

感謝德約，我可以修改我的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);

來源

2012-12-20 22:02:52

我意識到這是相當晚了一點，但這裏有一點幫助（以備將來參考）。 JQuery animate函數默認情況下設置easing的swing，這意味着動畫的速度將始終改變（請參閱here）。

爲了解決這個問題，我將linear選項添加到光標的animate方法中，並稍微增加了它的速度。

你可以在JSFiddle看到這個新版本。

但是，由於setTimeout循環由於某些原因可能會變慢，所以動畫可能不同步。

來源

2015-03-11 03:14:48

動畫同步，光標和突出顯示

回答

相關問題