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

【问题标题】：Implementing simple slideToggle effect on navigation menu images在导航菜单图像上实现简单的滑动切换效果
【发布时间】：2012-01-17 20:07:18
【问题描述】：

我已成功在导航栏项目/图像上实现了滑动切换效果。可以看到效果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。

有人可以帮忙吗？

谢谢，

尼克

【问题讨论】：

标签： jquery jquery-ui slide slidetoggle

【解决方案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.

【讨论】：

我已经这样做了，它对幻灯片效果没有任何影响。
@Nick - 认为这可能是因为 slideToggle 被解雇了两次。我已经编辑了我的答案。
谢谢，但幻灯片效果看起来还是一样
@Nick - 你认为你可以在 jsfiddle.net 上对问题进行沙箱处理，以便我/我们更容易解决吗？
当然，这里是fiddle。一切可能都按预期工作，只是效果看起来不像我想要的那样。我希望的是文本的颜色可以在悬停时从上到下填充。你知道是否有办法实现这一目标？谢谢。