jQuery: animer l'énigme

Question

Je rencontre des problèmes d'animation jQuery ...

J'ai un pied de page avec un div caché dessus. Lorsque quelqu'un clique sur un bouton près de l'en-tête, le div devrait animer UP. Un peu comme glisser vers le haut, comme si vous tiriez un manila folder d'un tiroir. J'ai trouvé ce morceau de code qui est un peu ce que je veux, mais il déplace la ligne de base (pied de page).

.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"); 
}) 

Lorsque vous passez la souris sur la boîte rouge div, vous verrez que la div en dessous la pousse vers le bas. Comment puis-je l'obtenir pour animer ou grandir? (Il est désolé, il a juste pensé que maman me criait dessus).

Answer 1

Here est une page qui fonctionne comme je le souhaite. Je pense que le problème principal était le div en expansion doit être à l'intérieur d'un div qui a une hauteur. Here est une page avec le div expan couvrant d'autres contenus quand il se développe.

Vérifiez le code pour le Wordpress Sexybookmarks plugin pour un bon exemple de ce genre d'astuce.

Answer 2

Je devine que votre solution est l'une de ces deux choses:

1. position de changement: par rapport à la position: absolute
2. Vous ne voulez pas vraiment déplacer .featureBox mais plutôt un autre élément à l'intérieur de .featureBox (probablement un DIV)