我正在使用的小提琴: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);
    });
});

最佳答案

你的意思是这样吗? http://jsfiddle.net/Hu4bg/3/

我将代码压缩为一个事件,并更改了其工作方式(将多个图像框的ID匹配到链接类):

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


我还添加了另外两个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>

10-05 20:55
查看更多