Question

我正在使用jquery color生成一些随机颜色。我喜欢当用户将鼠标悬停在任何单选按钮标签上时显示这些颜色。

按照this site上的示例，我想我可能会尝试：

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。

=== UPDATE ===

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

jQuery不支持颜色动画的主要问题。可以找到更多结果jQuery: animate text color for input field?

Answer 3

$('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);
});

jquery随机颜色悬停

3 个答案: