我今天一直在努力尝试获得一个鼠标悬停文本颜色更改脚本，该脚本从更改字符串的第一个字母，然后是之后的每个字母进行动画处理。
它如此有效地创建了几乎一张颜色变化的幻灯片？我希望你明白我的意思。
我真的很困惑，最终将我想要动画的文本转换为字符串，将字符串转换为数组，然后使用设置超时的循环将数组中的每个元素更改为新颜色。
但我的逻辑肯定是到处都是，而且一切都行不通！
有人可以看看这个或为我提供一个解决方案！谢谢
【问题讨论】：
标签： jquery animation text colors
这样的事情怎么样：jsFiddle example。
jQuery:
var string = $('h2').text();
var letters = string.split('');
var x = string.length;
$('h2').text('');
$.each(letters, function(index) {
$('h2').append('<span id="e' + index + '" class="normal">' + letters[index] + '</span>');
});
function Animate(elem) {
setTimeout(function() {
$('#e'+elem).animate({
'color': 'yellow'
}, 500, function(){elem++;Animate(elem)});
}, 50);
}
$('h2').mouseenter(function() {
Animate('0');
}).mouseleave(function() {});
HTML：
<h2>OWEN MELBOURNE</h2>
【讨论】：
永远带我去，但试试这个：http://jsfiddle.net/mQ2UV/3/
$(function() {
var h2 = $('h2');
var letters = h2.text().split('');
var n = letters.length;
h2.html('');
for (var i = 0; i < n; i++) {
h2.append("<span class='normal' id='l" + i + "'>" + letters[i] + "</span>");
}
var attached = false;
$('h2').mouseover(function() {
if (attached) {
return;
}
attached = true;
var n = 1;
$("span").each(function() {
var t = this;
setTimeout(function() {
$(t).removeClass("normal").addClass("yellow");
}, 100 * n);
n++;
});
});
});
【讨论】：
setTimeout 进行延迟时遇到了麻烦。我想这就是我几个月不使用 JavaScript 得到的结果。
参考以下链接中使用Jquery Event change()方法的变色文字脚本..免费脚本可用。
http://www.hscripts.com/scripts/jquery/color-changing-text.php
【讨论】：