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