cuestiones altura jQuery DIV
-
11-09-2019 - |
Pregunta
Buenos días:)
Estoy utilizando animado de jQuery () en tanto la opacidad y la altura, en un div de tamaño fijo.
Todo funciona bien y dandy en Firefox, pero en IE8 (con y sin compatibilidad modo, por lo que estoy suponiendo que tendrá el mismo comportamiento en IE6 y IE7), la animación hace espectáculo, pero cuando la altura div llega a 0%, la altura de la div ajusta a la altura del texto dentro de ese div.
La primera cosa que hice de inmediato se puso a desbordamiento oculta, pero todavía da el mismo comportamiento.
Estoy usando la siguiente función para cambiar poco a poco altura / opacidad:
function OpacityFadeToggle(e_trigger, e_element, speed)
{
$(e_trigger).toggle(
function() {
$(e_element).animate({
opacity: 0.0,
height: "0px"
}, speed);
},
function() {
$(e_element).animate({
opacity: 1.0,
height: "500px"
}, speed);
}
);
}
$(function() {
OpacityFadeToggle("a#a2", "div#b1", 1000);
});
estilo de Mi div "B1" es el siguiente:
div#b1 {
color: #ffffff;
background-color: #000000;
overflow: hidden;
width: 600px;
height: 500px;
padding: 0px;
margin: 0px;
display: block;
}
Si prefiere quiere ver un ejemplo vivo, he establecido temporalmente una página aquí: click me !
Cualquier ayuda en este asunto es muy apreciada.
Solución
¿Qué hay de lo anima a 1px, a continuación, ocultar el div después de la animación se hace? Además, asegúrese de mostrar el div de nuevo antes de la animación a partir de 1 píxel a 500px.
function OpacityFadeToggle(e_trigger, e_element, speed)
{
$(e_trigger).toggle(
function() {
$(e_element).animate({
opacity: 0.0,
height: "1px"
}, speed).hide();
},
function() {
$(e_element).show().animate({
opacity: 1.0,
height: "500px"
}, speed);
}
);
}
Otros consejos
Puede intentar añadir una devolución de llamada a llamada animado de jQuery, y dentro de la devolución de llamada ocultar la div cambiando es propiedad de presentación.