随机引用机器 - 点击jQuery改变颜色

我一直在做freecodecamp的挑战之一，可以得到一个简单的功能工作出于某种原因，我真的还没有线索呢。
我想改变一些使用jQuery的点击元素的CSS（类似于示例网站，真的很喜欢这个想法），但它不起作用。请帮忙..
我有不同颜色的变量。随机引用机器 - 点击jQuery改变颜色

var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#FFA5FC", "#B7BBFF", "#B6FDFF", "#A8FFC1", "#B6FF99"]; 

var randomColor = Math.floor(Math.random() * colors.length); 
    $("body").animate({ 
    backgroundColor: colors[randomColor], 
    color: colors[randomColor] 
    }, 500);

但它不工作，我想这太：

var red = Math.floor(Math.random() * 255); 
var green = Math.floor(Math.random() * 255); 
var blue = Math.floor(Math.random() * 255); 
var color = "rgb(" + red + "," + green + "," + blue + ")"; 
$("body").animate({backgroundColor: color}, 1000);

只有工作是这样的，但我不知道如果我可以用这个方法

document.getElementById("body").style.backgroundColor = colors[randomColor];

动画颜色的一个

所以我的问题是，我可以动画使用document.getElementById方法，为什么jQuery不工作？我使用codepen.io并在设置中加载了jQuery（与jQuery UI一起）。

来源

2017-05-03 poohateq

我相信你需要包括jQueryUI能够为背景颜色设置动画。虽然用CSS代替JS可以更好地做到这一点 –

你有5个答案，你没有评论过其中的一个。有帮助吗？接受答案或至少评论以获得更多信息/指导将是很好的。 –

对不起，即时通讯新的，给大家upvote，但看起来像我需要一些声誉来计算。我尝试了所有的答案，并使用James Monger的css解决方案。 – poohateq

这可以用CSS单独解决。

添加到您的CSS：

body { 
    transition: background-color 0.5s ease; 
}

然后，您可以使用您的代码来改变background-color，这将触发转换：

document.getElementById("body").style.backgroundColor = colors[randomColor];

JSFiddle example

Google has information on why you would use CSS vs JS animations。

来源

2017-05-03 12:53:41

你应该尝试改变一个div

$(document).ready(function() { 
    $('div').click(function(){ 
     var back = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#FFA5FC", "#B7BBFF", "#B6FDFF", "#A8FFC1", "#B6FF99"];; 
     var rand = back[Math.floor(Math.random() * back.length)]; 
     console.log(rand); 
     $('div').css('background',rand); 
    }) 
})

Working fiddle

来源

2017-05-03 12:52:58 Manoj

你可以用CSS动画的backgroundColor以及

body { 
    background-color: #AD310B; 
    -webkit-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
}

只需设置的backgroundColor使用JavaScript的背景颜色这个例子它会动画。但我不确定getElementById("body")是否正确。更多类似document.querySelector("body")

document.getElementById("body").style.backgroundColor = colors[randomColor];

来源

2017-05-03 12:53:00 Mazz

答案是否定的，你不能用普通的JQuery动画，在他们的文档

动画属性解释和值

所有动画属性应该是动画到一个数字值，除非如下所述;大多数非数字属性不能使用基本的jQuery功能来动画（例如，宽度，高度或左侧可以是动画，但背景颜色不能，除非使用jQuery.Color插件）。

见http://api.jquery.com/animate/

对于彩色动画，可以使用mentioned plugin或别的东西一样一样jQuery UI

来源

2017-05-03 12:53:31

$(document).ready(function(){ 
 

 
$('button').click(function(){ 
 
    var colors = ["#D3FFA3", "#FFF8A7", "#FFBC98", "#FF9A95", "#FFA5FC", "#B7BBFF", "#B6FDFF", "#A8FFC1", "#B6FF99"]; 
 
    var randomColor = Math.floor(Math.random() * colors.length) + 0; 
 
    $("body").animate({backgroundColor: colors[randomColor]}, "slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script> 
 
<body> 
 
<button >Click Here</button> 
 
<div class="colorChange"> 
 

 
this will change color 
 
</div> 
 
</body>

请检查代码。我认为它可能会帮助你

谢谢

来源

2017-05-03 13:07:06

随机引用机器 - 点击jQuery改变颜色

回答

相关问题