-4

我在一个单独的 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 并且文本将重新出现。

4

1 回答 1

4

您可能会对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();
});
于 2012-07-06T13:22:17.603 回答