没有删除溢出隐藏如何显示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(); 

     }); 
});