jquery - transparencia - formulario transparente html
¿Cómo puedo animar un color de fondo a transparente en jQuery? (12)
Cambié un poco el código de Shog9 para adaptarlo a mis necesidades. Es algo así como el elemento destacado de jQuery UI, solo que no se desvanece en blanco. No es perfecto, pero funciona en la mayoría de los elementos
function highlight(element, color, speed) {
if (speed == null) speed = "fast";
var e;
var position;
element.each(function() {
e = $(this);
position = e.css(''position'');
if (position != ''absolute'')
e.css(''position'', ''relative'');
log(position);
e.append($("<div>")
.css({
backgroundColor: color,
position: ''absolute'',
top: 0,
left: 0,
zIndex: -1,
display: "none",
width: e.width(),
height: e.height()
}).fadeIn(speed).fadeOut(speed, function() { $(this).remove(); e.css(''position'', position); })
);
}); }
Puedo animar de transparente a color, pero cuando le digo a jquery que anima el backgroundColor: ''transparent'', simplemente cambia a blanco. ¿Algúna idea de cómo arreglar esto?
Mi solución fue animar al color visto por el usuario (es decir, el color del elemento principal), y luego establecer el color original (que puede o no ser ''transparente'') una vez que la animación ha terminado
var $t = $(some selector);
var seenColour = findColour($t, ''background-color'');
var origColour = $t.css(''background-color'');
$t.css(''background-color'', ''#ffff99'');
$t.animate(
{backgroundColor: seenColour},
4000,
function(){ $t.css(''background-color'', origColour)}
);
function findColour($elem, colourAttr)
{
var colour = $elem.css(colourAttr);
if (colour === ''transparent'')
{
var $parent = $elem.parent();
if ($parent)
{
return findColour($parent, colourAttr);
}
// Default to white
return ''#FFFFFF'';
}
return colour;
}
Puede usar color rgba (61, 31, 17, 0.5) donde 0.5 es la opacidad. Entonces, si quieres transparencia, establece la opacidad en 0.0
$(''.myClass'').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000);
Quería hacer esto y como no podía encontrarlo, lo pirateé. Esto es solo para blanco, se adapta a tus necesidades:
function animate_bg(ele, from, to) {
ele.css("background-color", "rgba(255, 255, 255, " + (from += from > to ? -1 : 1) / 10 + ")");
if(from != to)
setTimeout(function() { animate_bg(ele, from, to) }, 20);
}
Uso:
$("a").hover( function() {return animate_bg($(this), 0, 10)}, function() {return animate_bg($(this), 10, 0)} );
Tienes que encadenarlo
Por ejemplo, no puedes hacer esto:
$(''#panel'').animate({''backgroundColor'' : ''rgba(255,255,0,0.7'', ''opacity'': 1}, 3000);
o incluso
$(''#panel'').animate({''background-color'' : ''yellow'', ''opacity'': 1}, 3000);
pero puedes hacer esto:
$(''#panel'').css(''background-color'', ''rgba(255,255,0,0.7)'').animate({''opacity'': 1}, 3000);
Transparente no es realmente un color. Entonces, no puedes animarlo. Es posible que pueda lograr el efecto que está buscando utilizando un elemento separado para el fondo y animando la opacidad.
Ejemplo:
HTML:
<body style="background-color:yellow">
<!-- by default, "see through" to parent''s background color -->
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean nec magna. Nulla eu mi sit amet nibh pellentesque vehicula.
Vivamus congue purus non purus. Nam cursus mollis lorem.
</div>
</body>
Guión:
// on load...
$(function()
{
var container = $("#container");
container
.hover(
// fade background div out when cursor enters,
function()
{
$(".background", this).stop().animate({opacity:0});
},
// fade back in when cursor leaves
function()
{
$(".background", this).stop().animate({opacity:1})
})
// allow positioning child div relative to parent
.css(''position'', ''relative'')
// create and append background div
// (initially visible, obscuring parent''s background)
.append( $("<div>")
.attr(''class'', ''background'')
.css({
backgroundColor:''blue'',
position: ''absolute'',
top:0,
left:0,
zIndex:-1,
width:container.width(),
height:container.height()
})
);
});
El comentario de Kingjeffrey señala que esta respuesta está un poco desactualizada: los navegadores ahora son compatibles con los valores de color RGBA, por lo que puede animar solo el fondo. Sin embargo, jQuery no es compatible con esto en el núcleo; necesitará un plugin . Ver también: animaciones de color jQuery + RGBA
Usé la respuesta de Linus pero me encontré con IE. Cambié un poco para trabajar en IE también:
function animate_bg(ele, from, to) {
from += from > to ? -1 : 1;
if(!$.support.opacity){
if(from != to){
var opStr = (Math.round(from * 25.5)).toString(16);
//alert(opStr)
ele.css({background:''transparent'',filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#" + opStr + "FFFF00, endColorstr=#" + opStr + "FFFF00)"});
}else{
ele.css({background:''transparent'',filter:"none"});
}
}else{
ele.css("backgroundColor", "rgba(255, 255, 0, " + (from) / 10 + ")");
}
if(from != to)
setTimeout(function() { animate_bg(ele, from, to) }, 50);
}
El uso es el mismo:
$("a").hover(
function() {return animate_bg($(this), 0, 10)},
function() {return animate_bg($(this), 10, 0)}
);
Use el plugin jQuery Color: https://github.com/jquery/jquery-color
Conseguirá que tus animaciones transparente y rgba funcionen correctamente.
Use fondo en lugar de backgroundColor:
$(''#myDiv'').animate({background: "transparent"});
Use la transición de CSS:
$(''smth'').css(''transition'',''background-color 1s'').css(''background-color'',''transparent'')
o
$(''h1'').css({''transition'':''background-color 1s'',''background-color'':''red''})
Utilicé el parámetro de la función para eliminar el estilo una vez que se realizó la animación:
$(''[orgID='' + orgID + ''bg]'').animate({ backgroundColor: "white" }, 300, "linear", function()
{
$(''[orgID='' + orgID + ''bg]'').css(''background-color'', '''');
});
Funcionó muy bien.
$(selector)
.css({backgroundColor:"#f00"})
.animate({backgroundColor:"transparent"}, 2000, null,
function() { this.style.backgroundColor=''transparent''; });
No está tan limpio porque desvanece el bg en blanco antes de hacerlo transparente, pero es una opción.