JQuery UI中的彩色動畫在哪裏？

Question

我想在here中改變背景顏色，所以我查了一下，發現this place。有一個鏈接到顏色動畫jQuery插件，但顯然link不起作用。我試過下載jQuery-ui.zip，並在複選框中沒有關於彩色動畫的內容。在zip中，我打開了顯示所有功能的index.html，並發現，您猜對了，沒有任何關於彩色動畫的內容。有一些彩色動畫，但它都是瞬間的。如果你能夠向我提供一個鏈接，甚至是向正確的方向推進，那將是一件好事。

我知道這不屬於stackoverflow，但我找不到更好的。

Answer 1

要回答你的問題，他們如何在評論中做到這一點，只要看看Page Source。我發現這個：

<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/

HTML

<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()函數。這創建了我們需要的顏色代碼，並且您可以在此處瞭解更多：https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB

爲此，我們實際上只循環色調並使其每100毫秒或1/100th（1％）遞增100或1/10一秒。這在10秒內循環100次。

當我們循環時，我們使用它的ID選擇器調整我們的元素div的CSS background-css。