jquery случайный цвет наведения

Question

Я использую jquery color для генерации случайных цветов.Мне бы хотелось, чтобы эти цвета появлялись, когда пользователь наводит курсор на ярлыки радиокнопок.

Следуя примеру на этом сайте , я подумал, что можно попробовать:

spectrum();

function spectrum(){

var hue = ('lots of stuff here that generates random hue -- code on example webpage')

$('label').hover(function() {
   $(this).animate( { color: hue }, 10000) });

spectrum(); 

}

Мой селектор наведения не работает, и все остается его цвет по умолчанию.Я, очевидно, как-то напутал, но у меня недостаточно опыта, чтобы понять, что происходит не так.Есть предложения?

Answer 1

Попробуйте это:

$(document).ready(function() {
    $('label').hover(function() {
        var hue = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';
       $(this).stop().animate( { color: hue }, 500);
    },function() {
       $(this).stop().animate( { color: '#000' }, 500);
    });
});

Также смотрите мой jsfiddle .

=== ОБНОВЛЕНИЕ ===

function startAnimation(o) {
    var hue = 'rgb('
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ','
        + (Math.floor(Math.random() * 256)) + ')';
    $(o.currentTarget).animate( { color: hue }, 500, function() {
        startAnimation(o);
    });
}

$(document).ready(function() {
    $('label').hover(
        startAnimation,
        function() {
            $(this).stop().animate( { color: '#000' }, 500);
        }
    );
});

Смотрите мой обновленный jsfiddle .

Answer 2

$('label').hover добавит событие mouseover / mouseout к метке. Вы делаете это бесконечно, так как вы снова и снова вызываете спектр. Попробуйте вместо этого.

$('label').hover(function() {
    (function anim() {
        var hue = //hue stuff
        $(this).animate({
            color: hue
        }, 10000, function() {
            anim();
        });
    })();
}, function() {
    $( this ).animate({
         color: //original color
    }, 1000);
});

Answer 3

Основная проблема в том, что jQuery не поддерживает цветную анимацию. Другие результаты могут быть найдены jQuery: анимированный цвет текста для поля ввода?