jQuery: enigma animato

Question

Riscontro problemi di animazione di jQuery ...

Ho un piè di pagina con sopra un div nascosto. Quando qualcuno fa clic su un pulsante vicino all'intestazione, il div dovrebbe animare SU. Un po 'come scivolare verso l'alto, come se stessi estraendo una cartella manila da un cassetto. (Non la normale diapositiva verso l'alto in cui la parte inferiore del div scorre verso l'alto.)

Ho trovato questo pezzo di codice che è un po 'quello che voglio, tuttavia, sta spostando la linea di base (piè di pagina).

.featureBox{width:182px;
    height:150px;
    position:relative;
    border:1px solid red;
}

$('.featureBox').hover(function()  {
    $(this).animate({top:'-320px', height:'540px'},"slow");
},
function() {
    $(this).animate({top:'0px', height:'150px'},"slow");
})

Quando passi il mouse sopra la casella div rossa, vedrai che il div sottostante spinge verso il basso. Come faccio ad animare o crescere? (Lui-lui. Scusa. Ho solo pensato alla mamma che mi urlava).

Answer 1

Qui c'è una pagina che funziona nel modo in cui penso tu voglia. Penso che il problema principale sia stato il div in espansione che deve trovarsi all'interno di un div che ha un'altezza. Qui è una pagina con il div in espansione che copre altri contenuti quando si espande.

Controlla il codice del plugin Wordpress Sexybookmarks per un buon esempio di questo tipo di trucco.

Answer 2

Suppongo che la tua correzione sia una di queste due cose:

1. Cambia posizione: rispetto alla posizione: assoluto
2. Non vuoi spostare effettivamente .featureBox ma piuttosto un altro elemento all'interno di .featureBox (probabilmente un DIV)