FadeIn-FadeOut para borde de input?

[Dunnow]

Hola, ante todo, gracias por la ayuda

Acabo de escribir un formulario y estoy haciendo las comprovaciones tipicas: Maximo de caracteres, validos o no validos, si contiene o no contiene @, si esta especificado o no http etc...

El tema esque me gustaria, que al haber un error en uno de los campos el borde de un input type text cambiara a rojo, pero no de golpe, sino apareciendo lentamente. Algo asi como el fade in y el fadeout para hacer aparecer y desaparecer elementos, pero cambiando el color.

una ayudita?

[salbatore]

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:

//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:

colorFade(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!.

[Dunnow]

Gracias por la respuesta, a la que me ponga activo otra vez con el formulario lo pruevo, Gracias, aun asi, me parece raro que no haya ninguna funcion predefinida en jQuery para hacer tal cosa o_o :S

[salbatore]

Hola Dunnow,

Yo es que jquery no lo toco, jeje... si eso alguno que sepa te diga... pero con esa funcion es un gusto. Yo ademas la uso con otra funcion con la que valido los campos... y lo que hace es validar campo a campo con un bucle que se repite cada 15 milisengudos... y cada 15 se colorea un campo de verde fosforito... uno a uno... y cuando acaba pasan a su estado original...

Es como un fuego artificial... jeje... queda guapo... y mas si usas la propiedad border... de borde negro a green da un efeto guapo. Ademas es super rapido.

Hasta pronto!.