Code jQuery pour faire glisser div (accordéon)

Question

Je cherche une bonne jQuery, XHTML & code CSS pour obtenir l'effet comme on le voit dans l'image suivante:

http://i48.tinypic.com/a3o4sn.jpg

Évidemment, cela est une image statique, ce qui est censé arriver est le texte et l'arrière-plan transparent est caché, et quand vous placez votre souris sur l'image, elle glisse dans la vue et redescend sur onmouseout.

Je pense que c'est un accordéon, quelqu'un peut-il me pointer dans la bonne direction (ou peut-être avez-vous vu un autre site qui fait cela)?

Answer 1

Votre peut être intéressé par cette grande ressource: Sliding Boxes and captions

DEMO

Answer 2

Mon approche à cet effet est d'avoir un div avec overflow: hidden et le div noir transparent avec une marge supérieure qui le met "à l'extérieur" du conteneur. "En utilisant .hover() vous pouvez dire à la div noire de glisser lorsque la souris est au cours de la div du récipient, et de glisser à nouveau lorsque la souris quitte

balisage.

<div id='container'> 
    <div id='slider'>Some Text</div> 
</div> 

styles:

div#container { 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
} 

div#slider { 
    width: 100px; 
    height: 40px; 
    margin-top: 100px; 
    background: black; 
} 

Et votre script:

$('#container').hover (
    function() { 
     $('#slider').css('margin-top', '60px'), 
     $('#slider').css('margin-top', '100px');  
); 

J'oublie si vous devez mettre le 60px entre guillemets ou non, ou si vous devez passer 60 comme un int, jouer avec elle, mais nous espérons que cela vous aide à démarrer.

Answer 3

J'ai récemment utilisé un plugin jquery qui fait quelque chose de très similaire. Vous pouvez trouver le plugin fait tout ce dont vous avez besoin, ou regarder à la source pour voir comment l'effet de glissement est atteint (bien que, bien sûr, il y a plus d'une façon de faire à peu près n'importe quoi).

Le plug-in est appelé Showcase

Its home page a plus d'informations et de démonstration et des tutoriels

Enfin, une démonstration supplémentaire, here's the site where I used it.

HTH