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

发布于 2024-12-21 02:49:43 字数 1027 浏览 2 评论 0原文

我已成功在导航栏项目/图像上实现了 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。

有人可以帮忙解决这个问题吗？

谢谢，

尼克

原文

I have successfully implemented a slideToggle effect on a navigation bar item/image. You can see the effect here.

I was hoping that slideToggle would slide the hidden DIV/image straight down, rather than the effect I am seeing which is more of a curved/flip effect (I hope you are following me!). Is there a way of getting this effect using just jQuery?

Here is the CSS:

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

img.hover {
    display: none;
}

The 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>

And the script:

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

Because I couldn't get this working I also tried implementing jQuery UI, with the slide effect included, and this script, but I got no effect at all with this:

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

I'd rather not use jQuery UI if possible.

Could someone help with this?

Thanks,

Nick

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你的往事 2024-12-28 02:49:43

尝试将 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;
}

您更新的小提琴。

Try changing the CSS to this:

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.

回复收藏 0 原文

~没有更多了~