Hola amigos
En esta ocasión, vengo a consultarles por un problema al cual le vengo dando varias vueltas sin encontrar solución. El caso es que tengo un elemento <div> al cual quiero cambiar el color de fondo con un efecto de transición, pero sin utilizar la propiedad transition o alguna librería (dígase jQuery y similares).
Tengo elaborado lo siguiente:
Código HTML :
<input type = "radio" name = "color" value = "255, 0, 0" checked /> Red <input type = "radio" name = "color" value = "0, 255, 0" /> Green <input type = "radio" name = "color" value = "0, 0, 255" /> Blue <div></div>
Código CSS :
div{
width: 250px;
height: 150px;
background-color: rgb(255, 0, 0);
}
Código Javascript :
function change(color, element){
var final = [] || new Array(),
i = 0,
current = window.getComputedStyle ?
window.getComputedStyle(element, null).backgroundColor :
element.currentStyle.backgroundColor;
window.interval = window.interval || null;
if (window.interval != null)
clearInterval(window.interval);
current = current.split(/[^\d]/g);
current = (function(){
for (var k = 0, lengthCu = current.length, auxCu = [] || new Array(); k < lengthCu; k++)
if (current[k].length) auxCu.push(current[k]);
return auxCu;
})();
color = color.split(/[^\d]/g);
color = (function(){
for (var l = 0, lengthCo = color.length, auxCo = [] || new Array(); l < lengthCo; l++)
if (color[l].length) auxCo.push(color[l]);
return auxCo;
})();
final[0] = current[0];
final[1] = current[1];
final[2] = current[2];
window.interval = setInterval(function(){
if (final[0] < color[0]) final[0]++;
else if (final[0] > color[0]) final[0]--;
if (final[1] < color[1]) final[1]++;
else if (final[1] > color[1]) final[1]--;
if (final[2] < color[2]) final[2]++;
else if (final[2] > color[2]) final[2]--;
element.style.backgroundColor = "rgb(" + final.join(", ") + ")";
if (final[0] == color[0] &&
final[1] == color[1] &&
final[2] == color[2])
clearInterval(window.interval);
}, 0.1);
}
var options = document.getElementsByTagName("input"),
totalOpt = options.length,
aux = [] || new Array(),
div = document.getElementsByTagName("div")[0];
for (var m = 0; m < totalOpt; m++){
if (options[m].name == "color") aux.push(options[m]);
}
options = aux;
for (var j = 0, total = options.length; j < total; j++){
(function(index){
options[index].onclick = function(){
change(this.value, div);
};
})(j);
}
Tal y como lo tengo, funciona en Chrome, Firefox, Opera, Safari e IE11, sin embargo, lo probé en IE10 y versiones anteriores y no funciona. Probé colocando una alerta en la función y esta solo se visualiza en IE5.5, de IE6 a IE10, ni siquiera se llega a mostrar. Mi intención es que esto funcione tanto en navegadores antiguos como modernos, dígase desde IE5.5 o IE6 en adelante.
¿Qué puede estar sucediendo? ¿Quizá algún método no compatible? Aunque revisé la documentación de cada uno y son soportados en IE6+.
Saludos
