Question

我正在尝试创建一个垂直菜单，当您将鼠标悬停在链接上时，我想要一个图像（div会更好，因为它有内容）向下滑动它永远不会再次向上滑动，而是另一个链接悬停，它会在最后一个向下滑动的图像上向下滑动。

我想我应该更改z-index值，但我不知道如何通过JQuery控制这个东西。你能给我一个关于我小提琴的快速提示吗？

$(document).ready(function() {
    $("#leftmenu a").hover(function() {
        $("#img1").slideDown(250);
    });

    $("#leftmenu a").mouseleave(function() {
        $("#img1").slideUp(250);
    });
});

Answer 1

你是说这个意思吗？ http://jsfiddle.net/Hu4bg/3/

我已将代码浓缩为一个事件，改变了它的工作方式（将多个图像框的ID与链接类匹配）：

$("#leftmenu a").hover(function() {
    $("[id^=img]:not([id=" + $(this).attr("class") + "])").slideUp(250);
    $("#" + $(this).attr("class")).slideDown(250);
});

我还添加了2个img代码，其ID与a代码中的类匹配：

<div id="img1">Image here</div>
<div id="img2">Image here</div>
<div id="img3">Image here</div>

<ul>
    <li> <a class="img1" href="#">Image 1</a></li>
    <li> <a class="img2" href="#">Image 2</a></li>
    <li> <a class="img3" href="#">Image 3</a></li>
</ul>

Answer 2

.hover有两个参数。一个用于鼠标输入，另一个用于鼠标离开。

$("#leftmenu a").hover(function() {
    $("#img1").slideDown(250);
}, function() {
    $("#img1").slideUp(250);
});

Answer 3

您可以使用CSS Animation实际使用纯css执行此操作。

以下是此LIVE DEMO。

JQuery：在Mouseover上向下滑动图像

3 个答案: