2

我正在使用的小提琴：http: //jsfiddle.net/Hu4bg/1/

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

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

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

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

3 回答 3

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>
于 2013-02-27T12:00:59.993 回答
0

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

$("#leftmenu a").hover(function() {
    $("#img1").slideDown(250);
}, function() {
    $("#img1").slideUp(250);
});
于 2013-02-27T11:43:49.407 回答
0

您实际上可以通过使用纯 css 来做到这一点CSS Animation。

这是一个现场演示。

于 2013-02-27T11:58:29.480 回答