Przesuwanie w górę/w dół z JQuery do pewnej wysokości - czy to możliwe?

Question

Czy można przesunąć element div (zamykając go), ale nie całkowicie?

Mam na myśli, przesuń w górę, ale zostaw trochę tego wyświetlonego div, czy to możliwe?

Dzięki z góry, mem

Answer 1

Coś jak to może działać:

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

Zamiast 500px może być tylko oryginalna wielkość div, a 30px może być jednak znacznie ci chcesz pokazać, kiedy ma być ukryty.

Answer 2

Lepszym sposobem otwarcia div na jego pierwotną wysokość jest użycie slideDown(). Problem polega na tym, że ta funkcja wymaga ukrycia div, zanim będzie można go otworzyć. następujący sposób jest trochę brzydki, ale działa dobrze:

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

Answer 3

Nie polecam przy użyciu metody animate jQuery, bo to czasami buggy w niektórych przeglądarkach. Animacja slajdu z przejściami CSS jest lepszym wyborem (według mnie), poprzez ustawienie wysokości div lub maksymalnej wysokości.

CSS:

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

na kliknięcie, ustawić max-height z jQuery:

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

Następnie wyjąć stylizacji kiedy jest kliknięty ponownie:

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

Możesz zajrzeć this demo example