使用jQuery Mobile Slider製作動畫顏色

Question

目前，我使用範圍爲0到10的範圍滑塊將背景顏色的不透明度從0更改爲1。這很容易理解。

我真正需要做的是當滑塊增加值時，將顏色從橙色淡化爲粉紅色。完全橙色爲0，完全粉紅色爲10，在兩者之間的所有間隔上具有淡化/補間效果。我對如何實現這一點感到迷茫。

這是我現在有：

$("#slider").change(function() { 

    sVal = $(this).val(); 

    $(this).next().css("background-color", "rgba(217,80,160," + (sVal * 0.1) + ")"); 

}); 

而且我的演示是在這裏： http://jsfiddle.net/kSP5P/

Answer 1

做到這一點，最簡單的方法是標準化的滑塊值（除以10吧，在這case），用這個歸一化的值乘以兩個RGB值（橙色和粉紅色）之間的差異，並將其添加到您的基本RGB值（粉紅色）。

這是超級基礎，可能有更好的方式來做到這一點......但它看起來不錯，它的工作原理。以下是我的代碼版本：

// RGB values for orange 
orangeR = 255; 
orangeG = 165; 
orangeB = 0; 

// RGB values for pink 
pinkR = 217; 
pinkG = 80; 
pinkB = 160; 

$("#slider").change(function() { 

    // Normalize the slider value (between 0 and 1) 
    sVal = $(this).val()/10.0; 

    // Calculated RGB values for our slider 
    currentR = parseInt(pinkR + (orangeR - pinkR) * sVal); 
    currentG = parseInt(pinkG + (orangeG - pinkG) * sVal); 
    currentB = parseInt(pinkB + (orangeB - pinkB) * sVal); 

    // Set the slider background color 
    $(this).next().css("background-color", "rgb(" + currentR + "," + currentG + "," + currentB + ")"); 

}); 

...和a modified version of your fiddle。乾杯!