所以我几乎让我的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的链接。
答案 0 :(得分:3)
这可能会让我失望,但也许你会得到一些更好的主意......
Fiddle Here
$(document).ready(function() {
$('p').click(function(){
$('span').animate({'width':'100'},1000);
$('.cursor').animate({marginLeft: 100},1000);
});
});
答案 1 :(得分:1)
感谢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);
答案 2 :(得分:0)