Question

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

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

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

但是我的逻辑到处都是确定的，而且事情都没有用!!

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

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

Answer 1

这样的事情： 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>

Answer 2

永远地抓住我，但试试这个：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++;
        });

    });
});

Answer 3

请使用以下链接中的Jquery Event change（）方法参阅颜色更改文本脚本。可以使用免费脚本。

http://www.hscripts.com/scripts/jquery/color-changing-text.php

jQuery文本颜色变化动画

3 个答案: