动画同步，光标和高光
所以我几乎让我的代码工作得如何，但无法让我的动画一起合作。 我正在尝试为突出显示文本的光标添加动画，然后单击一个按钮。 问题在于光标太慢或太快。 我试图让这个动态的 ，所以， 不管文字是多久我仍然可以有动画同步 。 我知道这可能只是一个数学问题，但不能完全摆脱困境。 尝试以毫秒为单位匹配像素的事情正在让我的头部旋转。 在我拔出所有头发之前请帮忙。 谢谢。
这里是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);
这里是我一直在玩的小提琴的链接。
这可能会让我失望，但也许你会得到一些更好的想法...
小提琴在这里
$(document).ready(function() {
$('p').click(function(){
$('span').animate({'width':'100'},1000);
$('.cursor').animate({marginLeft: 100},1000);
});
});
感谢Dejo，我能够修改我的代码，使其完全按照我的意愿工作。 增加一个跨度的宽度要容易得多，而不是试图扩大一个跨度而缩小另一个跨度。 这也使我能够同时移动光标和跨度增加动画。
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);
我意识到这有点晚，但这里有一些帮助（供将来参考）。 默认情况下，JQuery的animate功能是设置swing的easing ，这意味着动画的速度将会不断变化（请参阅此处）。
为了解决这个问题，我将linear选项添加到光标的animate方法中，并稍微提高了速度。
你可以在JSFiddle上看到这个新版本。
但是，由于setTimeout循环由于某些原因可能会变慢，所以动画可能不同步。