沒有刪除溢出隱藏如何顯示div框？

Question

這是我的jQuery代碼：

$(document).ready(function() { 
    $('.caption').hide(); 
    $('.replaybox', this).hover(function() { 
     $('.caption', this).stop().animate({ 
      opacity: 1, 
      height: 30 
     }, 200); 
    }, function() { 
     $('.caption', this).stop().animate({ 
      opacity: 0, 
      height: 0 
     }, 200); 
    }); 

    $('span').click(function() { 
     $('.div', this).slideToggle(); 
    }); 
}); 

現在我想，當我在.replaybox所以.caption格高度懸停鼠標是動畫30像素。我現在把跨度放在.caption類中，當我點擊跨度時，.div類被切換，並且當時.replaybox溢出被隱藏，因此我的.div框被隱藏在主類中，所以我怎樣才能在高度和高度上顯示頂部。 HTML代碼是野兔：

<div class="replaybox"> 
    <div class="caption"> 
     <span> 
       <img src="coffe.png"/> 
       <div class="div"></div> 
     </span> 
     <span> 
       <img src="emotion.png"/> 
       <div class="div"></div> 
     </span> 
     <span> 
       <img src="podcast.png"/> 
       <div class="div"></div> 
       </span> 
     <span> 
       <img src="cog.png"/> 
       <div class="div"></div> 
     </span>  
    </div> 
</div> 

你也可以看到在這個環節： http://jsfiddle.net/Abhinav/yYW9C/7/

Answer 1

jsFiddle of your link

你現在加入一個隱藏你需要證明（）

$(function(){ 

     $('.caption').hide(); 
     $('.replaybox').hover(function(){ 

      $('.caption',this).show(50).animate({opacity: 1, 
      height: 30}, 200); 
     },function(){ 

       $('.caption',this).animate({opacity: 0, 
      height: 0 }, 200); 


     }); 

     $('span').click(function(){ 

      $('.div',this).slideToggle(); 

     }); 
});