jQuery文本颜色变化动画

Question

今天我一直在喋喋不休地尝试获得一个鼠标悬停的文本颜色更改脚本,通过更改字符串的第一个字母以及之后的每个字母来激活.

如此有效地创造了几乎变化的彩色幻灯片？我希望你明白我的意思.

我真的很困惑,最后得到我想要动画的字符串,将字符串转换为数组,然后使用带有设置超时的循环将数组中的每个元素更改为新颜色.

但我的逻辑到处都是我确定的,事情就是不行!

有人可以看一看或给我一个解决方案!谢谢

http://jsfiddle.net/OwenMelbz/qTbzq/

Answer 1

这样的事情怎么样:jsFiddle例子.

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>