Hola Dunnow,
Supongo que no querras usar un framework para hacer la validacion y la futura visualizacion de los errores, jeje... a mi tampoco me gustan mucho... pero bueno te ahorras un curro. De todos modos mira:
Código Javascript
:
Ver original//change color
//iniciate
function colorFade(id,element,start,end,steps,speed)
{
var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
if(document.getElementById(id))
{
var target = document.getElementById(id);
}
else
{
var target = id;
}
steps = steps || 20;
speed = speed || 20;
clearInterval(target.timer);
endrgb = colorConv(end);
er = endrgb[0];
eg = endrgb[1];
eb = endrgb[2];
if(!target.r) {
startrgb = colorConv(start);
r = startrgb[0];
g = startrgb[1];
b = startrgb[2];
target.r = r;
target.g = g;
target.b = b;
}
rint = Math.round(Math.abs(target.r-er)/steps);
gint = Math.round(Math.abs(target.g-eg)/steps);
bint = Math.round(Math.abs(target.b-eb)/steps);
if(rint == 0) { rint = 1 }
if(gint == 0) { gint = 1 }
if(bint == 0) { bint = 1 }
target.step = 1;
target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}
// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint)
{
if(document.getElementById(id))
{
var target = document.getElementById(id);
}
else
{
var target = id;
}
var color;
if(target.step <= steps) {
var r = target.r;
var g = target.g;
var b = target.b;
if(r >= er) {
r = r - rint;
} else {
r = parseInt(r) + parseInt(rint);
}
if(g >= eg) {
g = g - gint;
} else {
g = parseInt(g) + parseInt(gint);
}
if(b >= eb) {
b = b - bint;
} else {
b = parseInt(b) + parseInt(bint);
}
color = 'rgb(' + r + ',' + g + ',' + b + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
target.r = r;
target.g = g;
target.b = b;
target.step = target.step + 1;
} else {
clearInterval(target.timer);
color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
if(element == 'background') {
target.style.backgroundColor = color;
} else if(element == 'border') {
target.style.borderColor = color;
} else {
target.style.color = color;
}
}
}
// convert the color to rgb from hex //
function colorConv(color)
{
var rgb = [parseInt(color.substring(0,2),16),
parseInt(color.substring(2,4),16),
parseInt(color.substring(4,6),16)];
return rgb;
}
Te explico como chuta, primero debes seleccionar el elemento que deseas cambiar, luego el parametro que deseas cambiar, si es background pues el fondo, si es border pues el borde, tu sabras!... jeje. Luego le dices los colores.
Aunque veas mucho codigo... es una tonteria... solo que aunque no lo creas es un rollo morrocotudo hacerlo!.
Código Javascript
:
Ver originalcolorFade(tu_elemento,'background','ffffff','66FF00');
Realmente llevo un tiempo buscando funciones de este tipo y siempre acabo usando esta, jeje... es perfect!.... ademas tirada de cambiar. Yo le he puesto alguna cosilla mas pero bueno... por ejemplo que no necesite id para los elementos y demas.
Hasta pronto!... siento no poner de donde lo saque... pero es que se me olvido!... si ofendo a su creador... me doy un tiron de orejas!.
Hasta pronto!...
Espero haberte ayudado!.