Question

我已成功在导航栏项/图像上实现了slideToggle效果。您可以看到效果here。

我希望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;
}

Your updated fiddle.

在导航菜单图像上实现简单的slideToggle效果

1 个答案: