il fade solitamente è una dissolvenza mentre in questo caso si tratta di cambiare il colore, o gradiente, del testo.
In generale preferisco poter riutilizzare il codice e riadattarlo in modo semplice, ecco una mia proposta bytefx style che oltre al colore del testo permette di cambiare altri tipi di colore ed ha funzioni in qualche modo riutilizzabili:
codice:
function gradient(id, start, end, speed, prop, callback){
var style = document.getElementById(id).style,
i = setInterval(function(){
for(var j = 0; j < 3; j++)
start[j] = gradient.run(start[j], end[j], speed);
style[prop] = gradient.color(start);
if(String(start) === String(end)) {
clearInterval(i);
if(callback)
callback(id);
}
}, 20);
start = gradient.rgb(start.substring(1));
end = gradient.rgb(end.substring(1));
speed = speed || 10;
prop = prop || "color";
return i;
};
gradient.color = function(c){return "#".concat(gradient.hex(c[0]), gradient.hex(c[1]), gradient.hex(c[2]))};
gradient.hex = function(rgb, c){return (c = rgb.toString(16)).length === 1 ? "0".concat(c) : c};
gradient.rgb = function(c){return [parseInt(c.substr(0,2), 16), parseInt(c.substr(2,2), 16), parseInt(c.substr(4,2), 16)]};
gradient.run = function(x, y, speed) {return x < y ? Math.min(x + speed, y) : Math.max(x - speed, y)};
Questo è un esempio di come la funzione può essere usata:
codice:
onload = function(){
var div = document.createElement("div");
div.id = "test";
div.appendChild(document.createTextNode("Hello Gradient !"));
document.body.appendChild(div);
gradient("test", "#000000", "#FFFFFF", 10, "color", function(id){
gradient(id, "#FFFFFF", "#000000", 20, "backgroundColor", function(id){
gradient(id, "#FFFFFF", "#676767", 5)
})
});
};
speed, prop e callback sono optional:
speed assente: default 10
prop assente: default "color"
callback assente: default "un tubo"
Rispondi quotando
...sì tu 
