javascript - jquery中动画的随机颜色

Question

我尝试使用带有 ui 的 jquery 添加文本效果animate。有没有一种方法可以在不定义所有颜色的情况下随机显示所有可能的颜色。例如颜色组合是基于RGB. 使用带有颜色的动画

setInterval(function() {
jQuery(".font-style").animate({color: "red"}, 2000).
          animate({color: "green"}, 2000).animate({color: "blue"}, 2000);}, 400);

是否有可能RGB在 jquery 中显示随机的颜色组合。任何建议都会很棒。

谢谢。

Answer 1

您可以像这样生成随机颜色：

var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
jQuery(".font-style").animate({color: newColor}, 2000); // animate

这将创建一个随机的十六进制颜色，例如#ff00cc。

注意：常规 jQuery 不会为颜色设置动画，您必须使用jQuery 颜色插件或jQuery UI

Answer 2

你可以这样做：

var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

而不是放入col你的动画：

jQuery(".font-style").animate({color: col}, 2000)

Answer 3

var hue = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';

然后将其添加hue到您的颜色中

jQuery(".font-style").animate({color: hue}, 2000).
          animate({color: hue}, 2000).animate({color: hue}, 2000);}, 400);

JSFIDDLE DEMO for RANDOM color for label

Answer 4

你可以使用Math.random

setInterval(function() {

var red= Math.floor((Math.random()*255)+1);
var blue = Math.floor((Math.random()*255)+1);
var green = Math.floor((Math.random()*255)+1);
jQuery(".font-style").animate({color: "red"}, red).
          animate({color: "green"}, green).animate({color: "blue"}, blue);}, 400);

如果您连续运行它，它可能会很快变得无响应。

Answer 5

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

最短代码

演示

"#"+((1<<24)*Math.random()|0).toString(16);

Answer 6

您可以使用 javascripts 随机方法，设置边界并让它生成十六进制或 rgb 代码。将它们分配给变量并使用它们代替“红色”、“绿色”、“蓝色”等。