在导航菜单图像上实现简单的滑动切换效果

Question

我已经成功地在导航栏项目/图像上实现了slideToggle效果。你可以在这里看到效果。

我希望slideToggle会滑动隐藏的DIV/图像直接向下，而不是我看到的效果，这是一个弯曲/翻转的效果(我希望你跟着我!)。是否有一种方法来获得这种效果仅使用jQuery?

下面是CSS:

li#home {
    background: url('images/home.png') no-repeat;
    width: 120px;
    height: 40px;
}
img.hover {
    display: none;
}

HTML:

<div class="nav">
<ul>
<li id="home"><a href="index.html" class=""><img src="images/home-hover.png" width="120px" height="40px" class="hover"></a></li>
</ul>

和脚本:

$('li#home').hover(function () {
    $('img.hover').slideToggle('medium');
    });

因为我不能得到这个工作，我也尝试实现jQuery UI，包括幻灯片效果，和这个脚本，但我没有得到任何效果:

$('li#home').hover(function () {
      $('img.hover').show("slide", { direction: "down" }, 1000);
});

如果可能，我宁愿不使用jQuery UI。

有人能帮忙吗?

谢谢,尼克

Answer 1

尝试将CSS更改为:

li#home {
    background: url('http://salliannputman.com/images/home.png') no-repeat;
    width: 120px;
    height: 40px;
    position: relative;
}
img.hover {
    position: absolute;
    height: 40px;
    display: none;
}
.nav {
    background-color:#292929;
    padding:20px;
}

您更新的小提琴