Scorri su/giù con JQuery fino a una certa altezza - è possibile?

Question

È possibile far scorrere un div up (chiudendolo) ma non completamente?

Voglio dire, scorrere verso l'alto ma lasciare un po 'di quel div visualizzato, è possibile?

Grazie in anticipo, mem

Answer 1

Qualcosa di simile può funzionare:

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

Invece della 500px può essere solo la dimensione originale del div, e il 30px può essere per quanto si voglio mostrare quando è destinato a essere nascosto.

Answer 2

Il modo migliore per aprire div alla sua altezza originale è utilizzare slideDown(). Il problema è che questa funzione richiede che div sia nascosto prima che possa aprirlo. La seguente modo è un po 'brutto, ma funziona bene:

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

Answer 3

Non consiglio usando il metodo animate di jQuery perché è a volte buggy in alcuni browser. Animare la diapositiva con le transizioni CSS è una scelta migliore (secondo me), impostando l'altezza div o l'altezza massima.

CSS:

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

al clic, impostare max-height con jQuery:

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

Quindi estrarre il lo stile quando viene cliccato di nuovo:

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

Potete guardare this demo example