Question

我尝试使用jquery和ui animate添加文本效果。是否有一种方法可以随机显示所有可能的颜色而无需定义所有颜色。例如，颜色组合基于RGB。使用带有颜色的动画

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

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

感谢。

Answer 1

您可以生成如下随机颜色：

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

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

注意：常规jQuery不会为颜色设置动画，您必须使用jQuery color plugin或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);

标签

的 RANDOM 颜色为

JSFIDDLE DEMO

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;
}

最短的代码

DEMO

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

Answer 6

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

jquery中动画的随机颜色

6 个答案: