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();
});

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

1 个答案: