SlideToggle div над контентом

Question

У меня есть 2 div s. В каждом div у меня есть некоторый контент, а также другой div, который по умолчанию скрыт и относительный позиционируется поверх содержимого. Когда я нависаю над div, я хочу, чтобы скрытый div скользил вверх. То, что я пробовал, не работает для меня.

код .. Я просто показываю его часть, так как оба divs одинаковы. 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 CSS-код для одного, то .forums точно так же. Я достал ненужный css.

.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 - это то, что я пытаюсь получить в слайд-шоу. Но по какой-то причине он не работает.

Ive пытался.

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

По-прежнему не повезло. Может ли кто-нибудь помочь? :/Heres идея о том, что я пытаюсь получить -

Answer 1

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

Это должно работать. Я надеюсь, что

Answer 2

Если я правильно понимаю, вы хотите что-то вроде этого: example

Использование display: none не не делает элемент, пока вы «показать», что, таким образом прячась элемент с overflow: hidden, вероятно, лучше.

Here is a nice tutorial on a similar effect

Не решить вашу проблему в самом деле, надеюсь, что это помогает в любом случае!

EDIT: Ваш код с моего примера:

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

Некоторые любят эту http://jsfiddle.net/ambiguous/ENpsH/3/ должны работать; Я удалил все лишние вещи из вашего образца и снова начал добавлять необходимые бит. Основная идея состоит в том, чтобы поместить ваш скользящий путь ниже контейнера, а затем подтянуть его вплотную к краю, когда вы знаете, насколько высок контейнер; то вы можете просто оживить top вверх и вниз по действиям наведения.

Answer 4

Я нашел проблему. В строке файла 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; } 

Удалить Z-index: -1;

Я установил JavaScript просто чтобы показать на экране, и теперь вам нужно исправить значения:

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