Deslice hacia arriba/abajo con JQuery hasta cierta altura, ¿es esto posible?

Question

¿Es posible deslizar un div (cerrarlo) pero no completamente?

Quiero decir, deslice hacia arriba pero deje un poco de ese div en la pantalla, ¿es posible?

Gracias de antemano, mem

Answer 1

Algo como esto puede funcionar:

$("#div").toggle(
function(){ 
    $("#div").animate({ height:"500px" }, { queue:false, duration:500 }); 
}, 
function(){ 
    $("#div").animate({ height:"50px" }, { queue:false, duration:500 }); 
}); 

En lugar de la 500px que puede ser sólo el tamaño original de la div, y el 30px puede ser por más que se Quiero mostrar cuándo debe ocultarse.

Answer 2

La mejor manera de abrir div a su altura original es usando slideDown(). El problema es que esta función requiere que div esté oculta antes de poder abrirla. La siguiente forma es un poco feo, pero funciona bien:

$("#test").toggle(
function(){ 
    $("#test").css('height', 'auto').hide().slideDown('fast'); 
}, 
function(){ 
    $("#test").animate({ height:'50px' }, { queue:false, duration:500 }); 
}); 

Answer 3

No recomiendo utilizando el método de jQuery animado porque es a veces con errores en algunos navegadores. Animar la diapositiva con transiciones CSS es una mejor opción (según yo), estableciendo la altura div o la altura máxima.

CSS:

.expandable { 
    max-height: 3em; 
    overflow: hidden; 
    transition: max-height .3s; 
} 

al hacer clic, ajuste max-height con jQuery:

$(.someSelector).css('max-height', expandedHeight); 

continuación, quitar el estilo, cuando se hace clic de nuevo:

$(.someSelector).attr('style', ''); 

Usted puede mirar this demo example