悬停图像以显示其他div中的文字

Question

我有一个5个不同图像的序列，每个图像都在一个单独的div中。在这些下面，我有另一个div，我打算根据任何形象悬停的文本填充文本。

这个想法是，每个图像，当徘徊将填补这个文本div与相关信息。我也想为这个div设置动画，以便它以高度0开始，并将其展开至150px，然后添加文本，并且当鼠标移出图像时，它应该折叠。

这个区域下面有一个页脚，所以我不能隐藏它，然后显示当徘徊。

有没有一种简洁的方式来使用JavaScript/JQuery来做到这一点？

感谢

编辑：

我已经把东西在一起，我自己尝试解决这一点，但有几个问题

$(document).ready(
    function(){  
     $("#upper").hover(
      function(){ 
       $('#caption').animate({'height': '150px'}, 1500); 
       $('#caption').html('Tesrtssadwa'); 
      }, 
      function(){ 
       $('#caption').stop().animate({'height': '0px'}, 1500); 
      } 
     ); 
} 
); 

所以这确实非常多，我想什么用几个问题。如果我快速悬停在div上几次，它会排列动画。理想情况下，我希望不会发生这种情况。有没有一个简单的方法来做到这一点，或者它会比它的价值更麻烦吗？

此外，有一次我设法让div崩溃，但文本仍然显示。我一直无法重现这一点，但有没有办法让文本消失，因为股利崩溃？

$('#caption').html(''); 

看起来有点坏

编辑：我可以重现它。将鼠标悬停在图像上，直到完全展开为止，然后离开它将折叠div，文本将重新出现。

Answer 1

您可能会对mouseover，mouseout，slideDown和slideUp功能感兴趣。如果我理解正确，这样的事情就是你要找的东西：

$("#picture1").mouseover(function() { 
     $("#textdiv").slideDown().html("This is information about picture 1. It is the first picture." 
}).mouseout(function() { 
     $("#textdiv").slideUp(); 
}); 

$("#picture2").mouseover(function() { 
     $("#textdiv").slideDown().html("This is information about picture 2. It is the second picture." 
}).mouseout(function() { 
     $("#textdiv").slideUp(); 
}); 

$("#picture3").mouseover(function() { 
    $("#textdiv").slideDown().html("This is information about picture 3. It is the last picture." 
}).mouseout(function() { 
    $("#textdiv").slideUp(); 
});