将图像悬停在其他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崩溃,但文字仍在显示.我无法重现这一点但有没有办法让文字在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();
});