使用 Jquery 的翻转效果

Posted 2023-05-08

【中文标题】使用 Jquery 的翻转效果

【英文标题】：rollover effect using Jquery

【发布时间】：2010-09-20 16:29:09

【问题描述】：

你能帮我用jquery制作一个翻转效果吗，我想做的是当有人将鼠标悬停在任何菜单项上时，文本会向下滑动并消失并且图片从上向下滑动到中心（例如您可以在panda 看到这种效果，因为您可以看到图片从顶部向下滑动，但文字没有向下滑动，这不是我们想要的）。

我知道使用 flash 可以轻松完成，但我不希望我的菜单在 flash 中，因为那将是一个不好的做法。

你能告诉我我需要在我的菜单 html 中更改什么以及我应该使用哪些 jquery 函数吗？

非常感谢您的帮助

附：这是我的菜单 HTML，你可以在这里看到我的菜单

<ul class="nav">

<li class="active first"><a href="#" class="home">Home</a></li>
<li><a href="#" class="news">News</a></li>
<li><a href="#" class="offers">Special offers</a></li>
<li><a href="#" class="private">Private label</a></li>
<li><a href="#" class="locations">Locations</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="jobs">Jobs</a></li>
<li><a href="#" class="contact">Contact us</a></li>
<li><a href="#" class="mm">Multimedia</a></li>

</ul>

菜单：

【问题讨论】：

你有 1 个代表，所以我告诉你一个秘密。没有人喜欢收到“为我做我的工作”，至少你能提供你的 jquery 代码，我们会回答你的问题......

【参考方案1】：

我会提供一些地方开始寻找，而不是为你做这件事。

这是一个可以轻松修改为使用“翻转”而不是“点击”的示例：http://css-tricks.com/examples/MenuFader/

关于如何将上述示例组合在一起的详细信息（教程）： http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

我通过在 Google 上搜索“jquery 效果示例”找到了本教程： http://www.google.com/search?hl=en&q=jquery+effects+examples&btnG=Google+Search&aq=f&oq= 并点击第一个和第二个链接。

祝你的 Jquery 项目好运。

【讨论】：

css-tricks 是一个很棒的网站。我还将提供以下来自 alistapart.com 的关于使用精灵生成此效果的文章。 alistapart.com/articles/sprites2

【参考方案2】：

首先，你真的很想给你独立的锚标签ID，因为它会让你更容易完成你想要的。

看看slideDown()和slideToggle()函数，它基本上需要你设置隐藏的div，然后在鼠标悬停事件上，你会滑动切换你的文本和隐藏的图像div，然后在mouseout上做反之。

祝你好运，使用 jQuery 非常有趣。玩它，看看你能炸毁什么！