悬停图像以在其他 div 中显示文本

Question

我在一个单独的 div 中有一系列 5 个不同的图像。在这些下方，我有另一个 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 折叠，但文本仍在显示。我无法重现这一点，但有没有办法让文本在 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();
});