2011-03-18 6 views
5

Quiero a deslizarse hacia abajo (mostrar) DIV que tiene 0px altura inicialmente:¿Cómo exactamente el control .slideDown/Up() de jQuery se desliza a una altura desconocida (automática)?

<div id="toslide" style="height:0px;overflow:hidden;"> ... various content </div>

Sin embargo, la altura final no se conoce debido a diversos anchos de pantalla, tamaños de fuente y otras cosas que afectan a la disposición en el interior y por lo tanto la altura del objetivo.

Si tuviera que hacerlo manualmente, lo mostraría con visibility:hidden;, mida la altura y luego animate hasta la altura conocida (esto tiene, sin embargo, inconvenientes).

Tengo resultados mixtos con jQuery's .slideDown() - en la documentación funciona, pero no funciona para mí en este caso particular.

¿Cómo puede saber jQuery la altura final?

Editar: una solución es tener otro div interno con height:auto; que se usaría para medir la altura.

+0

No es una respuesta, pero si quiere saber cómo funciona una función de jQuery: http://james.padolsey.com/jquery/ –

Respuesta

-1

que debe obtener el .height() de los elementos que lo integran, los resumir y hacer que la altura de la div que la altura :)

http://api.jquery.com/height/

+0

Esta es una solución muy débil debido a los flotadores. – tillda

0

Esta es una vieja pregunta un poco. Era original en busca de una respuesta al mismo problema, su edición era exactamente lo que estaba buscando.

JSFiddle for all the goodies

$("a#moreRequests").on("click", function(){// click this and the div grows 

//console.log("this hits"); 
var friends = $(".friendsDiv"); 
var divHeight = $(".auto").height(); 

if(friends.hasClass("grow")){// if the div has the class grow on it, then shrink 
    friends.animate({ 
    height: "100px" 
    },1000, function(){ 
    console.log("this is if it has the class .grow,"); 
    }).removeClass("grow"); 
} 
else{ 
    friends.animate({ 
    height: divHeight 
    },1000, function(){ 
    console.log("this is if it doesn't has the class .grow div height: " + divHeight); 
    }).addClass("grow"); 
} 
return false; 
}); 

Esperanza que ayuda a cualquier persona con el mismo problema.

Cuestiones relacionadas