使用Jquery进行翻转效果

Question

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

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

你能告诉我在菜单HTML中我需要改变什么以及我应该使用什么jquery函数。

非常感谢您的帮助

P.S。这是我的菜单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>

MENU：

Answer 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项目好运。

Answer 2

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

查看slideDown（）和slideToggle（）函数，它基本上要求你设置隐藏的div然后在mouseover事件上，你会滑出你的文本和隐藏的图像div，并在mouseout上做相反。

祝你好运，jQuery很有趣。玩它，看看你能炸掉什么！