Dilettante_Pro, спасибо, за совет.
Оно теперь у меня хоть моргает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#field {
position: relative;
width: 400px;
height: 400px;
margin-left: 10%;
margin-top: 10%;
border: 5px solid black;
}
.block {
width: 100%;
height: 33.33%;
border: 1px solid black;
}
</style>
<body>
<div id="field">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<script type="text/javascript">
window.onload = function () {
console.log('Everything GOOD');
var $field = $('#field'),
$block = $('.block'),
len =$('#field >div').length;
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / len;
var i = 0;
setInterval(Rainbow, 100);
function Rainbow(){
if ( i < 255 ) {
var rValue = Math.sin(frequency * i + 2) * width + center;
var gValue = Math.sin(frequency * i) * width + center;
var bValue = Math.sin(frequency * i + 4) * width + center;
var r = Math.floor(rValue),
g = Math.floor(gValue),
b = Math.floor(bValue);
$block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});
$block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});
$block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});
i++
if (i==254) {
i=1
return i
}
console.log( "i=" + i);
}
}
}
</script>
</body>
</html>
Осталось понять почему оно отображает только 3 цвета. Это при том что rgb праметры каждую иттерацию разные Подскажите, пожалуйста, как сделать всю палитру