Jquery: rollover fade background
7 jul 2010 7 comentarios
Vamos a ver un bonito efecto de rollover en jQuery sobre un div aplicando un efecto fade en el color de fondo (background) de ese elemento. Para ello utilizamos la funcion animate:
Script (lo podeis guardar dentro de un archivo “.js” si quereis)
(function(jQuery){
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
jQuery.fx.step[attr] = function(fx){
if ( fx.state == 0 ) {
fx.start = getColor( fx.elem, attr );
fx.end = getRGB( fx.end );
}
fx.elem.style[attr] = "rgb(" + [
Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
].join(",") + ")";
}
});
function getRGB(color) {
var result;
if ( color && color.constructor == Array && color.length == 3 )
return color;
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
return colors[jQuery.trim(color).toLowerCase()];
}
function getColor(elem, attr) {
var color;
do {
color = jQuery.curCSS(elem, attr);
if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
break;
attr = "backgroundColor";
} while ( elem = elem.parentNode );
return getRGB(color);
};
})(jQuery);
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
jQuery.fx.step[attr] = function(fx){
if ( fx.state == 0 ) {
fx.start = getColor( fx.elem, attr );
fx.end = getRGB( fx.end );
}
fx.elem.style[attr] = "rgb(" + [
Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
].join(",") + ")";
}
});
function getRGB(color) {
var result;
if ( color && color.constructor == Array && color.length == 3 )
return color;
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
return colors[jQuery.trim(color).toLowerCase()];
}
function getColor(elem, attr) {
var color;
do {
color = jQuery.curCSS(elem, attr);
if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
break;
attr = "backgroundColor";
} while ( elem = elem.parentNode );
return getRGB(color);
};
})(jQuery);
Modo de uso del JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".caja_fade").hover(function() {
$(this).stop().animate({ backgroundColor: "#ff0"}, 800);
},function() {
$(this).stop().animate({ backgroundColor: "#A0DAF6" }, 800);
});
});
</script>
$(document).ready(function(){
$(".caja_fade").hover(function() {
$(this).stop().animate({ backgroundColor: "#ff0"}, 800);
},function() {
$(this).stop().animate({ backgroundColor: "#A0DAF6" }, 800);
});
});
</script>
<style>
.caja_fade{
width:250px;
height:150px;
line-height:150px;
text-align:center;
background:#A0DAF6;
color:#fff;
font-size:16px;
}</style>
.caja_fade{
width:250px;
height:150px;
line-height:150px;
text-align:center;
background:#A0DAF6;
color:#fff;
font-size:16px;
}</style>
PASA EL CURSOR POR ENCIMA
[/cc]
Podeis modificar los colores de: 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'.
Mi nombre es Jorge, y soy de León. Desde hace algo más de 6 años trabajo de desarrollador web en las disciplinas de diseño, programación y SEO.
7 Comentarios
jabr, el 19/07/2010 a las 17:57:52
no me funciono.. muy bueno tu blog, pero un consejo.. deberias explicar un poco mas.. hay muchos novatos como yo tratando de buscar info que nos sirva.. gracias
Cristian, el 04/08/2010 a las 16:40:12
para que funcione, tienes que poner el JS de jquery y jquery ui
saludos!
giuseppe, el 02/10/2010 a las 15:04:27
no funciona…….haz algo enjuto
aly, el 06/10/2010 a las 04:33:01
No funciona y tengo la ultima version de la libreria de jquery
bufa, el 06/10/2010 a las 13:16:50
Cierto, ya he editado el post, este efecto se consigue añadiendo el plugin color.js de jquery. Esta tarde pongo una demo de ejemplo.
Gracias
annirami, el 23/10/2010 a las 04:59:16
Muy bueno el tip, se entiende y funciona muy bien
Gracias…
lizz, el 13/11/2010 a las 12:22:25
hola oye una pregunta si quiero cambiar los colores del efecto como le hago.. la vdd esq soy nueva en esto pero m gusto muxo