JQuery UI中的彩色动画在哪里？

Question

我想做一个改变颜色的背景，就像在这里中一样，所以我查了一下，找到了这个地方。有一个链接到彩色动画jQuery插件，但显然链接 不工作。我试过下载jQuery-ui.zip，在复选框中，没有关于彩色动画的内容。在拉链中，我打开了显示所有功能的index.html，您猜到了，它与彩色动画无关。有一些彩色动画，但都是瞬间的。如果你能为我提供一个链接，甚至推动一个正确的方向，那将是伟大的。

我知道这不属于堆叠溢出，但我找不到更好的。

Answer 1

要回答你关于他们是如何在评论中这样做的问题，只需查看Page即可。我发现了这个：

<table class="main"><tr><td id="bg">
<table class="main"><tr><td style="background-color:rgba(0,0,0,0.5);vertical-align:middle;text-align:center;">
<div class="bordercolor" id="bordercolor">
<div id="text" class="text">
</div>
</div>
<div style="position:absolute;bottom:0px;left:0px;opacity:0.5;padding:4px;font-size:8pt;text-align:left;">(c) Orteil 2011<br>proudly hosted by <a href="http://dashnet.org">dashnet.org</a></div>
</td></tr></table>
</td></tr></table>

<script>
Nodes["main"].show();

function hsvToRgb(h, s, v){
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch(i % 6){
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }

    return [r * 255, g * 255, b * 255];
}


var t=0;
function Rainbow()
{
var Col=hsvToRgb((t%100)/100,1,1);
document.getElementById("bordercolor").style.backgroundColor="rgb("+Math.floor(Col[0])+","+Math.floor(Col[1])+","+Math.floor(Col[2])+")";
//document.getElementById("text").innerHTML="rgb("+Math.floor(Col[0])+","+Math.floor(Col[1])+","+Math.floor(Col[2])+")";
t++;
setTimeout("Rainbow();",1000/10);
}

Rainbow();

</script>

一个简单的解释和我自己使用JQuery的例子。不需要JQuery UI。参见工作示例：https://jsfiddle.net/Twisty/9nkc7sd6/

<div id="wrapper">
  <div class="bordercolor" id="bordercolor">
    <div id="text" class="text">
      I am a pretty pretty rainbow!
      <p><span id="hsv"></span>, <span id="rgb"></span></p>
    </div>
  </div>
</div>

CSS

#wrapper {
  width: 100%;
  background: #000;
  margin: 0;
  padding: 20px;
}

#bordercolor {
  width: 50%;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
}

JQuery

$(document).ready(function() {
  function hsvToRgb(h, s, v) {
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch (i % 6) {
      case 0:
        r = v, g = t, b = p;
        break;
      case 1:
        r = q, g = v, b = p;
        break;
      case 2:
        r = p, g = v, b = t;
        break;
      case 3:
        r = p, g = q, b = v;
        break;
      case 4:
        r = t, g = p, b = v;
        break;
      case 5:
        r = v, g = p, b = q;
        break;
    }

    return "rgb(" + Math.floor(r * 255) + "," + Math.floor(g * 255) + "," + Math.floor(b * 255) + ")";
  }
  var t = 0;
  setInterval(function() {
    var col = hsvToRgb((t % 100) / 100, 1, 1);
    $("#bordercolor").css("background-color", col);
    $("#hsv").html("hsv(" + ((t % 100) / 100) + ",1,1)");
    $("#rgb").html(col);
    t++;
  }, 1000 / 10);
});

这里的重要函数是色调饱和值(HSV)到红绿蓝(RGB)的hsvToRgb()函数。这就创建了我们需要的颜色代码，您可以在这里了解更多信息：RGB

对于这一点，我们实际上只是在Hue上循环，并且每100 ms或1/10秒钟增加1/100 (1%)。这个循环在10秒内通过所有100种颜色。

在循环过程中，我们使用元素background-css的ID选择器来调整元素div的CSS。