使用jQuery的翻转效果

Question

您能帮助我使用jquery产生翻转效果吗，我想做的是，当某人将鼠标悬停在任何菜单项上时，文本向下滑动并消失，图片从顶部向下滑动至中心（例如，您可以看到这种效果在这里是熊猫，因为您可以看到图片从顶部向下滑动，但文字没有向下滑动（这不是想要的）。

我知道可以使用Flash轻松完成此操作，但是我不希望Flash中显示菜单，因为这是一个不好的做法。

您能告诉我菜单HTML需要更改什么以及应该使用哪些jquery函数。

非常感谢你的帮助

PS这是我的菜单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>

菜单：

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= zh_CN&q=jquery+effects+examples&btnG=Google+Search&aq=f&oq =并单击第一和第二个链接。

祝您的Jquery项目好运。

Answer 2

首先，您确实要提供独立的锚标签ID，因为它将使您轻松完成所需的工作。

看一下slideDown（）和slideToggle（）函数，这基本上需要您设置隐藏的div，然后在mouseover事件上，将文本滑出和隐藏的图像div，在mouseout上则相反。

祝您好运，使用jQuery很有趣。 玩，看看你能炸死什么！