Анимация изменения цвета текста 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>

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 по следующей ссылке. Бесплатный скрипт доступен.

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