SlideToggle div over content

Question

J'ai 2 div s. Dans chaque div j'ai un peu de contenu et aussi un autre div qui est caché par défaut et est positionné par rapport au contenu. Quand je passe la souris sur la div je veux que la div cachée glisse vers le haut. Ce que j'ai essayé ne fonctionne pas pour moi.

code .. Ill juste en montrer une partie, puisque les deux div sont les mêmes. HTML:

<div class="youtube"> 
    <h1> Youtube </h1> 
    <span></span> 
    <div class="yt-desc"> 
    <p> 
     Pellentesque habitant morbi tristique senectus et 
     netus et malesuada fames ac turpis egestas. 
     Pellentesque habitant morbi tristique senectus et 
     netus et malesuada fames ac turpis egestas. 
     </p> 
    </div><!-- // .yt-desc --> 
    </div> <!-- // .youtube --> 

CSS:

Heres le css pour un, le .forums est exactement la même chose. J'ai sorti les css inutiles.

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; float: left; position: relative; z-index: -1; width: 260px; } 
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; } 
.youtube { margin: 0 216px 0 0; } 
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; } 
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; } 

.youtube .yt-desc, .forums .forums-desc { position: absolute; top: 94px; left: 0px; padding: 5px; display: none; } 

yt-desc est ce que j'essaye d'obtenir à slideup. Mais pour une raison quelconque, il ne fonctionne pas.

J'ai essayé.

$(".youtube").hover(function() { 
    $(".yt-desc").slideToggle("fast"); 
}); 

Toujours pas de chance. Quelqu'un peut-il aider? :/Heres une idée de ce que je suis en train de faire -

Answer 1

$(".youtube").hover(
    function() { $(this).children(".yt-desc").show("fast"); }, 
    function() { $(this).children(".yt-desc").hide("fast"); } 
); 

Cela devrait fonctionner. J'espère

Answer 2

Si je comprends bien, vous voulez quelque chose comme ceci: example

L'utilisation display: none ne rend pas l'élément jusqu'à ce que vous « show », donc cachant l'élément avec overflow: hidden est probablement mieux.

Here is a nice tutorial on a similar effect

n'a pas résolu votre problème vraiment, espère que ça aide quand même!

EDIT: Votre code avec mon exemple:

CSS

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; position: relative; width: 260px; overflow: hidden;} 
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; } 

.youtube { margin: 0 216px 0 0; } 
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; } 
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; } 

.youtube .yt-desc, .forums .forums-desc { width: 260px; position: absolute; bottom: -200px; padding: 5px;} 

JQuery

$(".youtube").hover( 
    function(){   $(this).children("div.yt-desc").stop().animate({bottom: 0}, 500); 
    }, 
    function(){    $(this).children("div.yt-desc").stop().animate({bottom: -20}, 500); 
}); 

Answer 3

Certains aiment ce http://jsfiddle.net/ambiguous/ENpsH/3/ devrait fonctionner; J'ai enlevé toutes les choses inutiles de votre échantillon et j'ai commencé à y mettre les bits nécessaires. L'idée de base est de positionner votre glissière en-dessous du conteneur, puis de la glisser jusqu'au bord lorsque vous connaissez la hauteur du conteneur; Ensuite, vous pouvez simplement animer le top de haut en bas sur les actions de vol stationnaire.

Answer 4

J'ai trouvé le problème. Sur la ligne de fichier CSS 43:

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; border: 1px solid #3c3c3c; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; position: relative; z-index: -1; width: 260px; } 

Enlever l'index Z: -1;

Je fixe le javascript juste pour faire apparaître sur l'écran et maintenant vous devez corriger les valeurs:

$(".youtube").hover( 
     function(){ 
      $(this).children(".yt-desc").show().animate({top: '+=50',}); 
     }, 
     function(){ 
      $(this).children(".yt-desc").hide().animate({top: '-=50',}); 
     } 
    );